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个。效果如下:

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值