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

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

我們已經(jīng)知道，可以通過以下方式創(chuàng)建一個(gè) Vue 實(shí)例：

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

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

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

請(qǐng)注意，對(duì)于自定義標(biāo)簽的命名 Vue.js 不強(qiáng)制遵循 W3C 規(guī)則 (小寫，并且包含一個(gè)短杠)，盡管這被認(rèn)為是最佳實(shí)踐。

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

  

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

  
A custom component!

A custom component!

你不必把每個(gè)組件都注冊(cè)到全局。你可以通過某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng) components 注冊(cè)僅在其作用域中可用的組件：

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

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

當(dāng)使用 DOM 作為模板時(shí) (例如，使用 el 選項(xiàng)來(lái)把 Vue 實(shí)例掛載到一個(gè)已有內(nèi)容的元素上)，你會(huì)受到 HTML 本身的一些限制，因?yàn)?Vue 只有在瀏覽器解析、規(guī)范化模板之后才能獲取其內(nèi)容。尤其要注意，像

、
、、 這樣的元素里允許包含的元素有限制，而另一些像 這樣的元素只能出現(xiàn)在某些特定元素的內(nèi)部。
在自定義組件中使用這些受限制的元素時(shí)會(huì)導(dǎo)致一些問題，例如：
...

自定義組件 會(huì)被當(dāng)作無(wú)效的內(nèi)容，因此會(huì)導(dǎo)致錯(cuò)誤的渲染結(jié)果。變通的方案是使用特殊的 is 特性：

應(yīng)當(dāng)注意，如果使用來(lái)自以下來(lái)源之一的字符串模板，則沒有這些限制：