Vue组件中的data必须是一个function

组件可以有自己的data,并且data必须是一个function。

在下面这个例子中,data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例。

Vue组件中的data必须是一个function_第1张图片


  
    
    
    
  

  

而当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

  Vue.component('counter',{
    template:'#tmp1',
    data:function(){
      return {count:0}
    },
    methods:{
      increment(){
        this.count++
      }
    }
  })

Vue组件中的data必须是一个function_第2张图片

你可能感兴趣的:(Vue)