vue中的子父组件的data配置项区别

关注Avue表单设计器的使用： 【Avue表单设计器的使用技巧】

关注Avue企业级开发应用官方源代码: 官方源代码

一，首先我们自定义一个子组件，并进行注册： 

// 定义一个名为 button-todo-counter 的新组件
Vue.component('button-todo-counter', {
  data: function () { // 每点击一次，就会返回一个新的data函数实例;
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">你单击了 {{ count }} 次.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-todo-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： 

接下来把定义的子组件作为父组件的一个元素来使用:

<div id="components-demo">
  <button-todo-counter></button-todo-counter>  <!--子组件作为父组件div的一个按钮使用-->
</div>

new Vue({ el: '#components-demo' })

 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

复用三次

<div id="components-demo">
  <button-todo-counter></button-todo-counter>
  <button-todo-counter></button-todo-counter>
  <button-todo-counter></button-todo-counter>
</div>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

二： data 必须是一个函数  在子组件中配置项是一个函数,该函数每使用一次，就会创建一个新的对象, 每次创建的对象都是不同的对象;

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

这样单击每一个按钮,各组件单独维护其属性count,互不影响:

   如下图：

                       

如果当我们定义这个 <button-todo-counter> 组件时，这样直接提供一个对象：

 

data: {
  count: 0
}

点击任何一个按钮就可能会像如下代码一样影响到其它所有实例：

 

所以，在vue中,父组件的配置项data ：{配置项1: value1}, 而子组件配置项data : function() {return {配置项1: value1}}