Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式

最新推荐文章于 2023-09-18 19:35:05 发布

向左z

最新推荐文章于 2023-09-18 19:35:05 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42238026/article/details/104447650

版权

一个加数器的例子：

<body>
  <div id="num">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

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

  <script src="../js/vue.js"></script>
  <script>
    // 注册全局组件
    Vue.component('cpn', {
      template: '#cpn',
      data(){
        return {
          counter: 0
        }
      }
    });

    new Vue({
      el: "#num"
    })
  </script>
</body>

运行之后：
在这里插入图片描述
这是将加数器组件使用了三次，现在点击第一个加数器按钮：

第一个计数值增加了，但是后面两个计数没有增加，说明这三个组件实例并不是共用的同一个组件data数据对象。
使用data()方法返回数据对象：

data(){
  return {
    counter: 0
  }
}

每一次返回的对象都是新的对象，会重新创建内存地址，
如果使用这种方式：

data: {
  counter: 0
}

那么每个组件实例都会共享同一个数据对象，这会影响组件的独立使用。

优惠劵

向左z

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式

一个加数器的例子：<body> <div id="num"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <...
复制链接

扫一扫