Vue组件的component中data属性function传对象和不穿的对象的区别(不同效果)

本文探讨Vue组件中data属性使用function返回对象与直接传入对象的区别。通过实例代码展示，当data是外部对象时，多个组件共享同一状态，导致点击事件互相影响；而使用function返回局部对象，每个组件拥有独立状态，避免了状态共享问题，有利于实现特定需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说上代码测试：

定义一个全局组件，绑定msg

我们首先看如果把data的值外传不在组件里面创建的效果

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>

  <template id="temp">
    <div>
        <input type="button" value="加一" @click='increment'>
        <h3>{{count}}</h3>
    </div>
  </template>

  <script>
    var dataObj={count:0}
    Vue.component('counter',{
      template:'#temp',
      data:()=>{
      	return dataObj
      },
      methods:{
        increment() {
          this.count++
        }
      }
    })

    var vm=new Vue({
      el:'#app',
      data:{},
      methods:{}
    });
  </script>
</body>

在这里插入图片描述

现在把dataObj注释， return {count:0}

//var dataObj={count:0}
    Vue.component('counter',{
      template:'#temp',
      data:()=>{
        return {count:0}
      },
      methods:{
        increment() {
          this.count++
        }
      }
    })

在这里插入图片描述

总结：

不难看出，这里的关键点就在于 return {} 这个地方如果是作用域外传入对象的话，上面三个组件的click方法都是处理的这个外部对象里面的count，所以他们作用于同样一个变量，但是如果是 return {count : 0}的话是写在template 内部的，所以每当你在page上渲染一个组件就会响应的创建一个count ，所以他们互不干预，在事件使用中我们可以根据这个小小的点实现不同需求的功能而省去多余的代码