組件注冊 · JS與WEB前端框架技術

# 組件注冊 ## 組件名在注冊一個組件的時候，我們始終需要給它一個名字。比如在全局注冊的時候我們已經看到了： ~~~ Vue.component('my-component-name', { /* ... */ }) ~~~ 該組件名就是`Vue.component`的第一個參數。你給予組件的名字可能依賴于你打算拿它來做什么。當直接在 DOM 中使用一個組件 (而不是在字符串模板或[單文件組件](https://cn.vuejs.org/v2/guide/single-file-components.html)) 的時候，我們強烈推薦遵循[W3C 規范](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當前以及未來的 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`的縮寫，即這個變量名同時是： * 用在模板中的自定義元素的名稱 * 包含了這個組件選項的變量名 ## [模塊系統](https://cn.vuejs.org/v2/guide/components-registration.html#%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F "模塊系統") 如果你沒有通過`import`/`require`使用一個模塊系統，也許可以暫且跳過這個章節。如果你使用了，那么我們會為你提供一些特殊的使用說明和注意事項。 ### [在模塊系統中局部注冊](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9C%A8%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F%E4%B8%AD%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C "在模塊系統中局部注冊") 如果你還在閱讀，說明你使用了諸如 Babel 和 webpack 的模塊系統。在這些情況下，我們推薦創建一個`components`目錄，并將每個組件放置在其各自的文件中。然后你需要在局部注冊之前導入每個你想使用的組件。例如，在一個假設的`ComponentB.js`或`ComponentB.vue`文件中： ~~~ import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... } ~~~ 現在`ComponentA`和`ComponentC`都可以在`ComponentB`的模板中使用了。 ### [基礎組件的自動化全局注冊](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C "基礎組件的自動化全局注冊") 可能你的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。我們有時候會把它們稱為[基礎組件](https://cn.vuejs.org/v2/style-guide/#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E5%90%8D-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)，它們會在各個組件中被頻繁的用到。所以會導致很多組件里都會有一個包含基礎組件的長列表： ~~~ import BaseButton from './BaseButton.vue' import BaseIcon from './BaseIcon.vue' import BaseInput from './BaseInput.vue' export default { components: { BaseButton, BaseIcon, BaseInput } } ~~~ 而只是用于模板中的一小部分： ~~~ <BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton> ~~~ 幸好如果你使用了 webpack (或在內部使用了 webpack 的[Vue CLI 3+](https://github.com/vuejs/vue-cli))，那么就可以使用`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 .split('/') .pop() .replace(/\.\w+$/, '') ) ) // 全局注冊組件 Vue.component( componentName, // 如果這個組件選項是通過 `export default` 導出的， // 那么就會優先使用 `.default`， // 否則回退到使用模塊的根。 componentConfig.default || componentConfig ) }) ~~~ 記住**全局注冊的行為必須在根 Vue 實例 (通過`new Vue`) 創建之前發生**。[這里](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js)有一個真實項目情景下的示例。