首页 > 编程知识 正文

vue能给data添加新的属性吗,vue 组件 data

时间:2023-05-05 00:58:39 阅读:239209 作者:1397

自定义组件

在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑:
为什么自定义组件在利用时,data变量引用方式为函数引用

Vue.component("this",{ template:'#info', methods:{ add(){this.number++} }, data:function(){ return{ number:0} } })

阅读文档得知
当多个实例引用同一个对象的时候,只要其中一个实例对该对象进行操作的话,其他实例中的数据也会发生变化;而在Vue中更多的是组件复用思想,需要每个组件都有该组件自己的数据,这样组件之间才不会相互影响干扰。因此,Vue组件中的数据不能写成对象的形式,要写成函数的形式;组件中data写成一个函数,数据以函数返回值来定义,每次组件复用的时候就会返回一个新的data,这样每个组件都有属于该组件的专有空间,各个组件有各自的数据,这样就不会干扰其他组件的运行操作。

所以决定进行测试:

<div id='app'> <this></this> <this></this> <this></this> </div> <template id='info'> <div> <p>{{number}}</p> <button @click='add'>累加器</button> </div> </template>

可以得知当引用一个自定义组件时:
每一个.vue文件都是一个组件,可以用作一个个单独的组件来进行复用,如果组件需要复用,那么组件中的data数据就一定会被复用,但是组件复用也不是单纯的在不同界面展示相同数据,所以data的属性值设置为对象的话,其中一处相同的data数据发生改变会造成全局复用的data数据跟着改变,data的属性值设置为函数的话,通过return对返回对象的复制拷贝,新建一个新的空间地址,这样就使每个实例都有单独的对象,即使发生数据改变,也只是在当前实例自己的作用域改变,不会引起其他实例的数据改变,达到实例之间不会相互影响干扰的目的

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。