53Vue - 组件的使用（data 必须是函数）

使用组件时，大多数选项可以被传入到 Vue 构造器中，有一个例外： data必须是函数。 实际上，如果你这么做：

Vue.component('my-component', {
  template: '{{ message }}',
  data: {
    message: 'hello'
  }
})

那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。最好理解这种规则的存在意义。

HTML代码：

JS代码：

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '{{ counter }}',
  // data 是一个函数，因此 Vue 不会警告，
  // 但是我们为每一个组件返回了同一个对象引用
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

效果图： 由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题：

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

现在每个 counter 都有它自己内部的状态了：