vue——12-组件中的data和methods 以及 data共享问题

<div id="enjoy">
    <my-div></my-div><br>
    <input type="button" @click="alertHei" value="我是实例中的按钮(hei)">
</div>

<template id="my_div">
    <!--用-->
    <!--
    <div>hello world!</div>
    <input type="date">
    会报错，要像下面外用div包装好
    -->
    <div>
        <div>hello world!</div>
        <input type="date"><br><br>
        <input type="button" @click="alertHello" :value="message">
    </div>
</template>

        {
            //1.实例化组件
            Vue.component('my-div', {
                //这次template是单引号（前面几次都是``）
                template: '#my_div',
                // data:{message:'hello girl!'}
                // 会报错：必须以函数形式
                // 1.组件可以有自己的 data 属性；
                // 2.组件 data 和实例的 data 有点不一样，实例中的 data
                // 可以为对象，但组件中的 data 必须是一个方法；
                // 3.组件中的 data 方法内部，还必须返回一个对象才行；
                // 4.组件中的 data 和实例中的使用方法一样
                data() {
                    return {
                        message: '我是组件中的按钮(hello)'
                    }
                },
                //methods 和实例中的一样
                methods: {
                    alertHello() {
                        alert('hello world!');
                    }
                }
            });

            new Vue({
                el: '#enjoy',
                data: {},
                methods: {
                    alertHei() {
                        alert('hei world!');
                    }
                }
            })
        }

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'
            })
        }