摘要：組件是最強(qiáng)大的功能之一。組件可以擴(kuò)展元素，封裝可重用的代碼。驗(yàn)證組件可以為指定驗(yàn)證要求。以下實(shí)例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個(gè)父組件關(guān)心的內(nèi)部事件。實(shí)例如果你想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件。

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹

注冊一個(gè)全局組語法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項(xiàng)。注冊后，我們可以使用以下方式來調(diào)用組件：

全局組件

所有實(shí)例都能用全局組件。
全局組件實(shí)例

注冊一個(gè)簡單的全局組件 runoob，并使用它：

局部組件

我們也可以在實(shí)例選項(xiàng)中注冊局部組件，這樣組件只能在這個(gè)實(shí)例中使用：
局部組件實(shí)例

注冊一個(gè)簡單的局部組件 runoob，并使用它：

Prop

prop 是父組件用來傳遞數(shù)據(jù)的一個(gè)自定義屬性。

父組件的數(shù)據(jù)需要通過 props 把數(shù)據(jù)傳給子組件，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"：
Prop 實(shí)例

動態(tài) Prop

類似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 v-bind 動態(tài)綁定 props 的值到父組件的數(shù)據(jù)中。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會傳導(dǎo)給子組件：
Prop 實(shí)例

以下實(shí)例中將 v-bind 指令將 todo 傳到每一個(gè)重復(fù)的組件中：
Prop 實(shí)例

注意: prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會反過來。
Prop 驗(yàn)證

組件可以為 props 指定驗(yàn)證要求。

prop 是一個(gè)對象而不是字符串?dāng)?shù)組時(shí)，它包含驗(yàn)證要求：

Vue.component("example", {
props: {

// 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
  type: String,
  required: true
},
// 數(shù)字，有默認(rèn)值
propD: {
  type: Number,
  default: 100
},
// 數(shù)組／對象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
  type: Object,
  default: function () {
    return { message: "hello" }
  }
},
// 自定義驗(yàn)證函數(shù)
propF: {
  validator: function (value) {
    return value > 10
  }
}

}
})

type 可以是下面原生構(gòu)造器：

String
Number
Boolean
Function
Object
Array

type 也可以是一個(gè)自定義構(gòu)造器，使用 instanceof 檢測。
自定義事件

父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)，即：

使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。

以下實(shí)例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個(gè)父組件關(guān)心的內(nèi)部事件。
實(shí)例

  
{{ total }}
  
  

如果你想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件。可以使用 .native 修飾 v-on 。例如：