什么是組件？

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

使用組件

注冊

之前說過，我們可以通過以下方式創(chuàng)建一個 Vue 實例：

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

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

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

對于自定義標(biāo)簽名，Vue.js 不強(qiáng)制要求遵循 W3C規(guī)則 （小寫，并且包含一個短杠），盡管遵循這個規(guī)則比較好。

組件在注冊之后，便可以在父實例的模塊中以自定義元素  的形式使用。要確保在初始化根實例之前注冊了組件：

// 注冊
Vue.component('my-component', {
  template: '
A custom component!
'
})
// 創(chuàng)建根實例
new Vue({
  el: '#example'
})

渲染為：

  
A custom component!

A custom component!

局部注冊

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

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

這種封裝也適用于其它可注冊的 Vue 功能，如指令。

DOM 模版解析說明

當(dāng)使用 DOM 作為模版時（例如，將 el 選項掛載到一個已存在的元素上）, 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標(biāo)準(zhǔn)化 HTML 后才能獲取模版內(nèi)容。尤其像這些元素 

 ， 
，  ，  限制了能被它包裹的元素，  只能出現(xiàn)在其它元素內(nèi)部。

在自定義組件中使用這些受限制的元素時會導(dǎo)致一些問題，例如：

...

自定義組件  被認(rèn)為是無效的內(nèi)容，因此在渲染的時候會導(dǎo)致錯誤。變通的方案是使用特殊的 is 屬性：

應(yīng)當(dāng)注意，如果您使用來自以下來源之一的字符串模板，這些限制將不適用：

• Vue.component('hello-world', {
    template: '#hello-world-template'
  })

  這在有很多模版或者小的應(yīng)用中有用，否則應(yīng)該避免使用，因為它將模版和組件的其他定義隔離了。
  

  使用 v-once 的低級靜態(tài)組件(Cheap Static Component)

  盡管在 Vue 中渲染 HTML 很快，不過當(dāng)組件中包含大量靜態(tài)內(nèi)容時，可以考慮使用 v-once將渲染結(jié)果緩存起來，就像這樣：

  Vue.component('terms-of-service', {
    template: '\
      
  \
        
  Terms of Service
  \
        ... a lot of static content ...\
      
  \
    '
  })

  
  網(wǎng)頁名稱：創(chuàng)新互聯(lián)VUE2教程：Vue.js2.0組件
  本文地址：http://m.5511xx.com/article/dpdhsso.html