組件名

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

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

該組件名就是?Vue.component?的第一個參數。

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

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

組件名大小寫

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

使用 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 是有效的。

全局注冊

到目前為止，我們只用過?Vue.component?來創建組件：

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

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

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

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

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

局部注冊

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

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

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

然后在?components?選項中定義你想要使用的組件：

new Vue({el: '#app',components: {'component-a': ComponentA,'component-b': ComponentB} })

對于?components?對象中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象。

注意局部注冊的組件在其子組件中不可用。例如，如果你希望?ComponentA?在?ComponentB?中可用，則你需要這樣寫：

var ComponentA = { /* ... */ }var ComponentB = {components: {'component-a': ComponentA},// ... }

或者如果你通過 Babel 和 webpack 使用 ES2015 模塊，那么代碼看起來更像：

import ComponentA from './ComponentA.vue'export default {components: {ComponentA},// ... }

注意在 ES2015+ 中，在對象中放一個類似?ComponentA?的變量名其實是?ComponentA: ComponentA?的縮寫，即這個變量名同時是：

• 用在模板中的自定義元素的名稱
• 包含了這個組件選項的變量名

模塊系統

如果你沒有通過?import/require?使用一個模塊系統，也許可以暫且跳過這個章節。如果你使用了，那么我們會為你提供一些特殊的使用說明和注意事項。

在模塊系統中局部注冊

如果你還在閱讀，說明你使用了諸如 Babel 和 webpack 的模塊系統。在這些情況下，我們推薦創建一個?components?目錄，并將每個組件放置在其各自的文件中。

然后你需要在局部注冊之前導入每個你想使用的組件。例如，在一個假設的?ComponentB.js?或?ComponentB.vue?文件中：

import ComponentA from './ComponentA' import ComponentC from './ComponentC'export default {components: {ComponentA,ComponentC},// ... }

現在?ComponentA?和?ComponentC?都可以在?ComponentB?的模板中使用了。

基礎組件的自動化全局注冊

可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。我們有時候會把它們稱為基礎組件，它們會在各個組件中被頻繁的用到。

所以會導致很多組件里都會有一個包含基礎組件的長列表：

import BaseButton from './BaseButton.vue' import BaseIcon from './BaseIcon.vue' import BaseInput from './BaseInput.vue'export default {components: {BaseButton,BaseIcon,BaseInput} }

而只是用于模板中的一小部分：

<BaseInputv-model="searchText"@keydown.enter="search" /> <BaseButton @click="search"><BaseIcon name="search"/> </BaseButton>

幸好如果你使用了 webpack (或在內部使用了 webpack 的?Vue CLI 3+)，那么就可以使用?require.context?只全局注冊這些非常通用的基礎組件。這里有一份可以讓你在應用入口文件 (比如?src/main.js) 中全局導入基礎組件的示例代碼：

import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase'const requireComponent = require.context(// 其組件目錄的相對路徑'./components',// 是否查詢其子目錄false,// 匹配基礎組件文件名的正則表達式/Base[A-Z]\w+\.(vue|js)$/ )requireComponent.keys().forEach(fileName => {// 獲取組件配置const componentConfig = requireComponent(fileName)// 獲取組件的 PascalCase 命名const componentName = upperFirst(camelCase(// 剝去文件名開頭的 `./` 和結尾的擴展名fileName.replace(/^\.\/(.*)\.\w+$/, '$1')))// 全局注冊組件Vue.component(componentName,// 如果這個組件選項是通過 `export default` 導出的，// 那么就會優先使用 `.default`，// 否則回退到使用模塊的根。componentConfig.default || componentConfig) })

記住全局注冊的行為必須在根 Vue 實例 (通過?new Vue) 創建之前發生。這里有一個真實項目情景下的示例。

?

from:?https://cn.vuejs.org/v2/guide/components-registration.html

總結

以上是生活随笔為你收集整理的Vue.js 组件注册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。