vue——13-挂载选项data

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82733976

<div id="enjoy">
    <my-div></my-div>
</div>

<template id="my_div">
    <!--用-->
    <!--
    <div>hello world!</div>
    <input type="date">
    会报错，要像下面外用div包装好
    -->
    <div>
        <div>hello world!</div>
        <input type="date">
        <p>{{message}}</p>
    </div>
</template>

        {
            //1.实例化组件
            Vue.component('my-div',{
                //这次template是单引号（前面几次都是``）
                template: '#my_div',
                // data:{message:'hello girl!'}
                // 会报错：必须以函数形式
                // data 在 new Vue 中可以用上面格式
                data(){
                    return{
                        message:'hello girl!'
                    }
                }
            });

            new Vue({
                el:'#enjoy',
            })
        }

data非共享和共享问题

共享：
不共享：

<div id="enjoy">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>
<!--注册一个组件-->
<template id="count">
    <button @click="counter += 1">点击次数：{{counter}}</button>
</template>

        {
            // let data={
            //     counter:0
            // };
            //1.实例组件
            Vue.component('my-btn', {
                template: '#count',
                data() {
                    //不会共享
                    return {
                        counter: 0
                    };
                    //会共享
                    // return data;
                }
            });

            new Vue({
                el: '#enjoy'
            })
        }