摘要：在較高層面上，組件是自定義元素，的編譯器為它添加特殊功能。這時可以把特性直接添加到組件上不需要事先定義添加屬性之后，它會被自動添加到的根元素上。下面是一個例子在本例中，子組件已經和它外部完全解耦了。

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現為用 is 特性進行了擴展的原生 HTML 元素。
使用組件

我們已經知道，可以通過以下方式創建一個 Vue 實例：

new Vue({
  el: "#some-element",
  // 選項
})

要注冊一個全局組件，可以使用 Vue.component(tagName, options)。例如：

Vue.component("my-component", {
  // 選項
})

請注意，對于自定義標簽的命名 Vue.js 不強制遵循 W3C 規則 (小寫，并且包含一個短杠)，盡管這被認為是最佳實踐。

組件在注冊之后，便可以作為自定義元素 在一個實例的模板中使用。注意確保在初始化根實例之前注冊組件：

  

// 注冊
Vue.component("my-component", {
  template: "
A custom component!
"
})
// 創建根實例
new Vue({
  el: "#example"
})
渲染為：

  
A custom component!

A custom component!

你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件：

var Child = {
  template: "
A custom component!
"
}
new Vue({
  // ...
  components: {
    //  將只在父組件模板中可用
    "my-component": Child
  }
})

這種封裝也適用于其它可注冊的 Vue 功能，比如指令。
DOM 模板解析注意事項

當使用 DOM 作為模板時 (例如，使用 el 選項來把 Vue 實例掛載到一個已有內容的元素上)，你會受到 HTML 本身的一些限制，因為 Vue 只有在瀏覽器解析、規范化模板之后才能獲取其內容。尤其要注意，像

、
、、 這樣的元素里允許包含的元素有限制，而另一些像 這樣的元素只能出現在某些特定元素的內部。
在自定義組件中使用這些受限制的元素時會導致一些問題，例如：
...

自定義組件 會被當作無效的內容，因此會導致錯誤的渲染結果。變通的方案是使用特殊的 is 特性：

應當注意，如果使用來自以下來源之一的字符串模板，則沒有這些限制：