組件註冊

該頁面假設你已經閱讀過了元件基礎。如果你還對組件不太了解，推薦你先閱讀它。

目錄

• 元件名稱

  • 元件名稱大小寫

• #全域註冊

• ##局部註冊

• #模組系統

  • 在模組系統中局部註冊

  • 基礎元件的自動化全域註冊

#元件名稱

---

#在註冊一個元件的時候，我們總是需要給它一個名字。例如在全域註冊的時候我們已經看到了：

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
  }
}

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

<BaseInput
  v-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
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )
  
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

記住全域註冊的行為必須在根Vue 實例(透過new Vue) 建立之前發生。 這裡有一個真實專案情境下的範例。