组件的复用

你可以将组件进行任意次数的复用：

  1. <div id="components-demo">
  2.   <button-counter></button-counter>
  3.   <button-counter></button-counter>
  4.   <button-counter></button-counter>
  5. </div>

组件的复用 - 图1

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

data 必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

  1. data: {
  2.   count: 0
  3. }

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

  1. data: function () {
  2.   return {
  3.     count: 0
  4.   }
  5. }

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

组件的复用 - 图2