摘要：組件的復用你可以將組件進行任意次數的復用注意當點擊按鈕時，每個組件都會各自獨立維護它的。

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

組件是可復用的 Vue 實例，且帶有一個名字：在這個例子中是 。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用：

 

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

因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

你可以將組件進行任意次數的復用：

注意當點擊按鈕時，每個組件都會各自獨立維護它的 count。因為你每用一次組件，就會有一個它的新實例被創建。

當我們定義這個 組件時，你可能會發現它的 data 并不是像這樣直接提供一個對象：

data: {
  count: 0
}

取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

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

如果 Vue 沒有這條規則，點擊一個按鈕就可能會影響到其它所有實例。

通常一個應用會以一棵嵌套的組件樹的形式來組織：

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

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

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

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

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

一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。
一個 prop 被注冊之后，你就可以像這樣把數據作為一個自定義特性傳遞進來：

然而在一個典型的應用中，你可能在 data 里有一個博文的數組：

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" }
    ]
  }
})

并想要為每篇博文渲染一個組件：

如上所示，你會發現我們可以使用 v-bind 來動態傳遞 prop。這在你一開始不清楚要渲染的具體內容的時候，是非常有用的。

當構建一個 組件時，你的模板最終會包含的東西遠不止一個標題：

{{ title }}

最最起碼，你會包含這篇博文的正文：

{{ title }}

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

  
{{ title }}
  

看起來當組件變得越來越復雜的時候，我們的博文不只需要標題和內容，還需要發布日期、評論等等。為每個相關的信息定義一個 prop 會變得很麻煩：

所以是時候重構一下這個 組件了，讓它變成接受一個多帶帶的 post prop：

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

      
{{ post.title }}
      

    
  `
})

現在，不論何時為 post 對象添加一個新的屬性，它都會自動地在 內可用。

上述的這個和一些接下來的示例使用了 JavaScript 的模板字符串來讓多行的模板更易讀。它們在 IE 下并沒有被支持，所以如果你需要在不 (經過 Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE，請使用折行轉義字符取而代之。

在我們開發 組件時，它的一些功能可能要求我們和父級組件進行溝通。例如我們可能會引入一個輔助功能來放大博文的字號，同時讓頁面的其它部分保持默認的字號。

在其父組件中，我們可以通過添加一個 postFontSize 數據屬性來支持這個功能：

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

它可以在模板中用來控制所有博文的字號：

現在我們在每篇博文正文之前添加一個按鈕來放大字號：

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

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})

問題是這個按鈕不會做任何事：當點擊這個按鈕時，我們需要告訴父級組件放大所有博文的文本。幸好 Vue 實例提供了一個自定義事件的系統來解決這個問題。父級組件可以像處理 native DOM 事件一樣通過 v-on 監聽子組件實例的任意事件：

同時子組件可以通過調用內建的 $emit 方法 并傳入事件名稱來觸發一個事件：

  Enlarge text

有了這個 v-on:enlarge-text="postFontSize += 0.1" 監聽器，父級組件就會接收該事件并更新 postFontSize 的值。

補充：vue中 關于$emit的用法

1、父組件可以使用 props 把數據傳給子組件。

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

vm.$emit( event, arg ) //觸發當前實例上的事件
vm.$on( event, fn );//監聽event事件后運行 fn； 

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

  Enlarge text

然后當在父級組件監聽這個事件的時候，我們可以通過 $event 訪問到被拋出的這個值：

（1）整段代碼如下：

或者，如果這個事件處理函數是一個方法：

那么這個值將會作為第一個參數傳入這個方法：

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

（2）整段代碼如下：

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

等價于

當用在組件上時，v-model 則會這樣：

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

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

現在 v-model 就應該可以在這個組件上完美地工作起來了：

完整代碼如下：

和 HTML 元素一樣，我們經常需要向一個組件傳遞內容，像這樣：

  Something bad happened.

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

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

      Error!
      
    
  `
})

有的時候，在不同組件之間進行動態切換是非常有用的，比如在一個多標簽的界面里：

上述內容可以通過 Vue 的 元素加一個特殊的 is 特性來實現：

在上述示例中，currentTabComponent 可以包括：已注冊組件的名字，或 一個組件的選項對象

有些 HTML 元素，諸如

、
、 和 ，對于哪些元素可以出現在其內部是有嚴格限制的。而有些元素，諸如
1. 、
和 ，只能出現在其它某些特定的元素內部。
這會導致我們使用這些有約束條件的元素時遇到一些問題。例如：

這個自定義組件 會被作為無效的內容提升到外部，并導致最終渲染結果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：

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

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

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

（3）