Vue初学16-组件中的数据绑定

       组件是为了复用，因此，组件中的数据不可能是一成不变的，往往也需要动态绑定数据。

       组件中也支持data属性，相同组件在使用时，数据必须独立，这样才有意义。data数据必须通过函数返回，如果data不通过函数返回，程序会报错。因为函数是独立的作用域，能够确保不同组件实例，数据是独立的。

       试想如果data不通过函数返回，组件的所有实例都共享data，组件就失去了意义。

以简单的计数器为例：

<script src="../js/vue.js"></script>

    <template id="cpn">
           <div>
                <h1>当前计数：{{counter}}</h1>
                <button @click="counter++">+</button>
                <button @click="counter--">-</button>
            </div>
    </template>

     <div id="app">
         <!--使用组件-->
         <mycpn></mycpn>
         <mycpn></mycpn>
         <mycpn></mycpn>
     </div>

    <script>

        //创建并注册组件
        Vue.component('mycpn',{
            template:'#cpn',
            data() {
                  return {
                       counter:0
                   }
                }
        });

        //vue绑定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>

此时，对组件使用了3次，每个组件中的counter是独立的，互不影响。效果如下：

下面模拟一下data不通过函数返回的情形：

    <script src="../js/vue.js"></script>

    <template id="cpn">
           <div>
                <h1>当前计数：{{counter}}</h1>
                <button @click="counter++">+</button>
                <button @click="counter--">-</button>
            </div>
    </template>

     <div id="app">
         <!--使用组件-->
         <mycpn></mycpn>
         <mycpn></mycpn>
         <mycpn></mycpn>
     </div>

    <script>
        const d = {
            counter:0
        }
        //创建并注册组件
        Vue.component('mycpn',{
            template:'#cpn',
            data() {
                       return d
                }
        });

        //vue绑定管理的div
        const vue=new Vue({
            el:'#app'
        });
    </script>

 此时，3个组件共享同一个全局的data，任意一个组件的计数发生变化，都会影响其他2个。效果如下：