基本示例

  1. // 定义一个Vue组件实例
  2. Vue.component('button-counter',{
  3.     data:function(){
  4.       return {
  5.         count:0
  6.     }
  7.   },
  8.   template:"<button v-on:click="count++">You clicked me{{ count }} times<button>"
  9. })

组件是可复用的Vue实例，且带有一个名字，此实例为<button-counter>
可在另一个通过new Vue创建的Vue实例中将这个组件当作自定义元素来调用

  1. <div id="components-demo">
  2.   <button-counter></button-counter>
  3. </div>
  1. new Vue({ el: '#components-demo' })

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

组件的复用

在同一页面或不同页面都可以对组件进行任意次数的复用：

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

因为每个组件是各自独立的维护自己的数据，因为每调用一次组件，都会有一个新的Vue实例被创建

data 必须以函数的形式返回

  1. data(){
  2.     return {
  3.       //数据
  4.   }
  5. }

一个组件的**data**选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
否则会出现数据共用，同时变化的状况

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

Vue-组件基础 - 图1

每个组件的使用都需要先注册，使Vue可识别，组件包括两种注册类型，全局注册和局部注册