本文實例講述了Vue 組件注冊。分享給大家供大家參考，具體如下：

1 組件名

在注冊一個組件的時候，我們始終需要給它一個名字。比如在全局注冊的時候我們已經(jīng)看到了：

Vue.component('my-component-name', { /* ... */ })

該組件名就是 Vue.component 的第一個參數(shù)。

你給予組件的名字可能依賴于你打算拿它來做什么。當直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候，我們強烈推薦遵循 W3C 規(guī)范 中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當前以及未來的 HTML 元素相沖突。

你可以在風格指南 中查閱到關(guān)于組件名的其它建議。

2 組件名大小寫

定義組件名的方式有兩種：

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

當使用 PascalCase (駝峰式命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

3 全局注冊

到目前為止，我們只用過 Vue.component 來創(chuàng)建組件：

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

這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的 Vue 根實例 (new Vue) 的模板中。比如：

html：

<div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c></div>

js：

Vue.component('component-a', { /* ... */ })Vue.component('component-b', { /* ... */ })Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })

在所有子組件中也是如此，也就是說這三個組件在各自內(nèi)部也都可以相互使用。

4 局部注冊

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

在這些情況下，你可以通過一個普通的 JavaScript 對象來定義組件：

var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }