摘要：組件的復(fù)用你可以將組件進(jìn)行任意次數(shù)的復(fù)用注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的。

// 定義一個(gè)名為 button-counter 的新組件
Vue.component("button-counter", {
  data: function () {
    return {
      count: 0
    }
  },
  template: "You clicked me {{ count }} times."
})

組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€(gè)名字：在這個(gè)例子中是 。我們可以在一個(gè)通過(guò) new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來(lái)使用：

 

      
    
    new Vue({ el: "#components-demo" })

因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

你可以將組件進(jìn)行任意次數(shù)的復(fù)用：

注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count。因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。

當(dāng)我們定義這個(gè) 組件時(shí)，你可能會(huì)發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個(gè)對(duì)象：

data: {
  count: 0
}

取而代之的是，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

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

如果 Vue 沒(méi)有這條規(guī)則，點(diǎn)擊一個(gè)按鈕就可能會(huì)影響到其它所有實(shí)例。

通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來(lái)組織：

為了能在模板中使用，這些組件必須先注冊(cè)以便 Vue 能夠識(shí)別。這里有兩種組件的注冊(cè)類型：全局注冊(cè)和局部注冊(cè)。至此，我們的組件都只是通過(guò) Vue.component 全局注冊(cè)的：

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

全局注冊(cè)的組件可以用在其被注冊(cè)之后的任何 (通過(guò) new Vue) 新創(chuàng)建的 Vue 根實(shí)例，也包括其組件樹中的所有子組件的模板中。

Prop 是你可以在組件上注冊(cè)的一些自定義特性。當(dāng)一個(gè)值傳遞給一個(gè) prop 特性的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè)屬性。為了給博文組件傳遞一個(gè)標(biāo)題，我們可以用一個(gè) props 選項(xiàng)將其包含在該組件可接受的 prop 列表中：

Vue.component("blog-post", {
  props: ["title"],
  template: "
{{ title }}
"
})

一個(gè)組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會(huì)發(fā)現(xiàn)我們能夠在組件實(shí)例中訪問(wèn)這個(gè)值，就像訪問(wèn) data 中的值一樣。
一個(gè) prop 被注冊(cè)之后，你就可以像這樣把數(shù)據(jù)作為一個(gè)自定義特性傳遞進(jìn)來(lái)：

然而在一個(gè)典型的應(yīng)用中，你可能在 data 里有一個(gè)博文的數(shù)組：

new Vue({
  el: "#blog-post-demo",
  data: {
    posts: [
      { id: 1, title: "My journey with Vue" },
      { id: 2, title: "Blogging with Vue" },
      { id: 3, title: "Why Vue is so fun" }
    ]
  }
})

并想要為每篇博文渲染一個(gè)組件：

如上所示，你會(huì)發(fā)現(xiàn)我們可以使用 v-bind 來(lái)動(dòng)態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容的時(shí)候，是非常有用的。

當(dāng)構(gòu)建一個(gè) 組件時(shí)，你的模板最終會(huì)包含的東西遠(yuǎn)不止一個(gè)標(biāo)題：

{{ title }}

最最起碼，你會(huì)包含這篇博文的正文：

{{ title }}

然而如果你在模板中嘗試這樣寫，Vue 會(huì)顯示一個(gè)錯(cuò)誤，并解釋道 every component must have a single root element (每個(gè)組件必須只有一個(gè)根元素)。你可以將模板的內(nèi)容包裹在一個(gè)父元素內(nèi)，來(lái)修復(fù)這個(gè)問(wèn)題，例如：

  
{{ title }}
  

看起來(lái)當(dāng)組件變得越來(lái)越復(fù)雜的時(shí)候，我們的博文不只需要標(biāo)題和內(nèi)容，還需要發(fā)布日期、評(píng)論等等。為每個(gè)相關(guān)的信息定義一個(gè) prop 會(huì)變得很麻煩：

所以是時(shí)候重構(gòu)一下這個(gè) 組件了，讓它變成接受一個(gè)多帶帶的 post prop：

Vue.component("blog-post", {
  props: ["post"],
  template: `
    

      
{{ post.title }}
      

    
  `
})

現(xiàn)在，不論何時(shí)為 post 對(duì)象添加一個(gè)新的屬性，它都會(huì)自動(dòng)地在 內(nèi)可用。

上述的這個(gè)和一些接下來(lái)的示例使用了 JavaScript 的模板字符串來(lái)讓多行的模板更易讀。它們?cè)?IE 下并沒(méi)有被支持，所以如果你需要在不 (經(jīng)過(guò) Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE，請(qǐng)使用折行轉(zhuǎn)義字符取而代之。

在我們開發(fā) 組件時(shí)，它的一些功能可能要求我們和父級(jí)組件進(jìn)行溝通。例如我們可能會(huì)引入一個(gè)輔助功能來(lái)放大博文的字號(hào)，同時(shí)讓頁(yè)面的其它部分保持默認(rèn)的字號(hào)。

在其父組件中，我們可以通過(guò)添加一個(gè) postFontSize 數(shù)據(jù)屬性來(lái)支持這個(gè)功能：

new Vue({
    el: "#blog-posts-events-demo",
    data: {
        posts: [/* ... */],
        postFontSize: 1
    }
})

它可以在模板中用來(lái)控制所有博文的字號(hào)：

現(xiàn)在我們?cè)诿科┪恼闹疤砑右粋€(gè)按鈕來(lái)放大字號(hào)：

Vue.component("blog-post", {
  props: ["post"],
  template: `
    

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})

問(wèn)題是這個(gè)按鈕不會(huì)做任何事：當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，我們需要告訴父級(jí)組件放大所有博文的文本。幸好 Vue 實(shí)例提供了一個(gè)自定義事件的系統(tǒng)來(lái)解決這個(gè)問(wèn)題。父級(jí)組件可以像處理 native DOM 事件一樣通過(guò) v-on 監(jiān)聽子組件實(shí)例的任意事件：

同時(shí)子組件可以通過(guò)調(diào)用內(nèi)建的 $emit 方法 并傳入事件名稱來(lái)觸發(fā)一個(gè)事件：

  Enlarge text

有了這個(gè) v-on:enlarge-text="postFontSize += 0.1" 監(jiān)聽器，父級(jí)組件就會(huì)接收該事件并更新 postFontSize 的值。

補(bǔ)充：vue中 關(guān)于$emit的用法

1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。

2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

vm.$emit( event, arg ) //觸發(fā)當(dāng)前實(shí)例上的事件
vm.$on( event, fn );//監(jiān)聽event事件后運(yùn)行 fn； 

有的時(shí)候用一個(gè)事件來(lái)拋出一個(gè)特定的值是非常有用的。例如我們可能想讓 組件決定它的文本要放大多少。這時(shí)可以使用 $emit 的第二個(gè)參數(shù)來(lái)提供這個(gè)值：

  Enlarge text

然后當(dāng)在父級(jí)組件監(jiān)聽這個(gè)事件的時(shí)候，我們可以通過(guò) $event 訪問(wèn)到被拋出的這個(gè)值：

（1）整段代碼如下：

或者，如果這個(gè)事件處理函數(shù)是一個(gè)方法：

那么這個(gè)值將會(huì)作為第一個(gè)參數(shù)傳入這個(gè)方法：

   methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
   }

（2）整段代碼如下：

自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>

等價(jià)于

當(dāng)用在組件上時(shí)，v-model 則會(huì)這樣：

為了讓它正常工作，這個(gè)組件內(nèi)的 必須：（1）將其 value 特性綁定到一個(gè)名叫 value 的 prop 上；（2）在其 input 事件被觸發(fā)時(shí)，將新的值通過(guò)自定義的 input 事件拋出

Vue.component("custom-input", {
  props: ["value"],
  template: `
    
  `
})

現(xiàn)在 v-model 就應(yīng)該可以在這個(gè)組件上完美地工作起來(lái)了：

完整代碼如下：

和 HTML 元素一樣，我們經(jīng)常需要向一個(gè)組件傳遞內(nèi)容，像這樣：

  Something bad happened.

可能會(huì)渲染出這樣的東西。幸好，Vue 自定義的 元素讓這變得非常簡(jiǎn)單：我們只要在需要的地方加入插槽就行了

Vue.component("alert-box", {
  template: `
    

      Error!
      
    
  `
})

有的時(shí)候，在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的，比如在一個(gè)多標(biāo)簽的界面里：

上述內(nèi)容可以通過(guò) Vue 的 元素加一個(gè)特殊的 is 特性來(lái)實(shí)現(xiàn)：

在上述示例中，currentTabComponent 可以包括：已注冊(cè)組件的名字，或 一個(gè)組件的選項(xiàng)對(duì)象

有些 HTML 元素，諸如

、
、 和 ，對(duì)于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如
1. 、
和 ，只能出現(xiàn)在其它某些特定的元素內(nèi)部。
這會(huì)導(dǎo)致我們使用這些有約束條件的元素時(shí)遇到一些問(wèn)題。例如：

這個(gè)自定義組件 會(huì)被作為無(wú)效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 is 特性給了我們一個(gè)變通的辦法：

需要注意的是如果我們從以下來(lái)源使用模板的話，這條限制是不存在的：

（1）字符串 (例如：template: "...")

（2）單文件組件 (.vue)

（3）