Vue-组件基础

定义一个名为button-counter的组件:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

我们把这个组件作为自定义元素来使用:
<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

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

我们普遍使用Vue的使用,data都是这样赋值的:

data: {
  count: 0
}

但是,一个组件的data选项必须是一个函数,这样每个实例可以维护一份被返回对象的独立的拷贝.

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

如果没有遵照Vue的这条规则,那么点击一个按钮就可能造成多个地方使用同一个组件,一个位置的组件改变影响到其他所有的组件.

全局组件和局部组件

两种组件的注册类型：全局注册和局部注册。

Vue.component 全局注册

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的人户新创建的Vue根实例.

组件名命名最好使用kebab-case(短横线分隔命名),引用的时候可直接按名字引用.

局部注册:

通过普通的JavaScript对象来定义组件:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义我们想要使用的组件：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

//在挂载的实例元素上使用。（上面挂载了“app”这个元素）
<div id="app">
  <component-a></component-a>
</div>

局部注册的组件在其子组件中不可用.

一般一些基础组件，频繁需要用到的，用全局注册，而只在某一个页面中使用的组件，用局部注册.

Prop单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。