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個。效果如下：