Vue.js入門教程-組件註冊

1、組件建立

1.1 建立步驟

建立Vue的組件都有三個基本步驟是 【①建立組件構造器、②註冊組件和③使用組件】。

1.2 基本示例

好比，咱們建立一個Button組件。

// 1. 建立一個組件構造器 
let myButton = Vue.extend({ 
    // 模板選項
    template: `<button>點擊我</button>` 
}) 

// 2. 註冊組件，並指定組件的標籤，組件的HTML標籤爲<my-button> 
Vue.component('my-button', myButton) // 組件名 構造器

// 建立Vue實例 
let app = new Vue({ 
    el: '#app' 
})

<!-- 3. #app是Vue實例掛載的元素 --> 
<div id="app"> 
    <my-button /> 
</div>

1.3 說明

（1）Vue.extend() 是Vue構造器的擴展，調用 Vue.extend() 建立的是一個組件構造器；

（2）Vue.extend() 構造器有一個選項對象，選項對象的 template 屬性用於定義組件要渲染的HTML，簡單的理解這個屬性用來定義組件的模板（也就是組件的HTML結構）；

（3）使用 Vue.component() 註冊組件，在註冊組件時須要提供兩個參數，第一個參數是組件的標籤（my-button），第二個參數是組件構造器（myButton）；

（4）組件應該掛載到Vue實例，不然不會生效。這一點須要特別的注意。另外同一個組件能夠同時掛載到多個Vue實例。

2、全局註冊

（1）咱們使用 Vue.component(tagName, options) 能夠註冊一個全局的組件，也就是說它們在註冊以後能夠用在任何新建立的 Vue 根實例 (new Vue) 的模板中。

let myButton = Vue.extend({ 
    template: `<button>點擊我</button>` 
}) 

Vue.component('my-button', myButton)

（2）如上寫法，咱們也能夠簡寫爲

Vue.component('my-button', { 
    template: `<button>點擊我</button>` 
})

（3）組件註冊以後，即可以做爲自定義元素 <my-button />，在一個實例的模板中使用。【注意】在初始化根實例以前註冊組件。

<div id="app"> 
    <my-button /> 
</div>

（4）【注意】對於自定義標籤的命名，Vue不強制遵循W3C規則（小寫，而且包含一個短槓），儘管這被認爲是最佳實踐。

3、局部註冊

（1）經過某個Vue實例/組件的實例選項 components 註冊，使用該選項註冊的組件被稱爲局部註冊。

let myButton = Vue.extend({ 
    template: `<button>點擊我</button>` 
})

let app = new Vue({ 
    el: '#app',
    components: {
        'my-button':myButton
    }
})

<div id="app"> 
    <my-button /> 
</div>

（2）獲得的效果和註冊全局組件是同樣的。不一樣的是，若是你在另外一個Vue實例中調用註冊的局部組件，該組件不會生效。好比在app2這個實例中調用app中註冊的組件my-button，就不會生效。

<div id="app2"> 
    <my-button /> 
</div>

4、組件註冊語法糖

4.1 做用

以上組件註冊的方式有些繁鎖，Vue爲了 簡化組件註冊的過程，提供了註冊語法糖。

4.2 全局註冊寫法

（1）使用 Vue.component() 直接建立和註冊組件。

// 註冊全局組件 my-button
Vue.component('my-button', { 
    template: `<button>點擊我</button>` 
})

let app = new Vue({ 
    el: '#app' 
})

（2）Vue.component() 的第一個參數是組件標籤名稱，第二個參數是一個選項對象，使用選對象的 template 屬性定義組件模板。

（3）使用這種方式，Vue在背後會自動調用 Vue.extend()來建立組件構造器。

4.3 局部註冊寫法

（1）在選項對象 components 屬性中註冊局部組件的語法糖。

let app = new Vue({ 
    el: '#app',
    components: {
        'my-button': {
            template: `<button>點擊我</button>` 
        }
    }
})

（2）【注意】儘管註冊組件的語法糖簡化了組件註冊，但在template選項中拼接HTML元素仍是至關的麻煩，儘管ES6的語法讓事情變得簡單了很多，但也將致使HTML和JavaScript的高耦合性。

（3）【其餘方式】慶幸的是，Vue除了上面這些語法糖以外，還提供了以下的方式。

Vue.component('my-button', { 
    template: '#my-button' 
})

<template id="my-button">
    <button>點擊我</button>
</template>

閱讀更多
更多系列文章在GitHub的地址 Vue.js入門教程