什么是組件

組件 (Component) 是：自定義的HTML“元素”。 “元素”，有自己特定的樣式，屬性，功能。

• 組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
• 在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。
• 所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對(duì)象 (除了一些根級(jí)特有的選項(xiàng)) 并提供相同的生命周期鉤子。

組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想，幾乎任意類(lèi)型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)：

components.png

Vue.component( id, [definition] )

注冊(cè)或獲取全局組件。 注冊(cè)還會(huì)自動(dòng)使用給定的id設(shè)置組件的名稱(chēng)

// 注冊(cè)組件，傳入一個(gè)擴(kuò)展過(guò)的構(gòu)造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注冊(cè)組件，傳入一個(gè)選項(xiàng)對(duì)象 (自動(dòng)調(diào)用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 獲取注冊(cè)的組件 (始終返回構(gòu)造器)
var MyComponent = Vue.component('my-component')

Vue.extend( options )

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。

data 選項(xiàng)是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)

<div id="mount-point"></div>

// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。
new Profile().$mount('#mount-point')

在 Vue 里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例。