Vue組件註冊

        本博客記錄了小編在學習Vue過程中的體會與感悟，簡單來說就是小編的學習筆記，學習地址主要爲Vue的官網，官網地址爲：《Vue官方文檔》。相關學習筆記會記錄在我的博客專欄《前端Vue》中，歡迎大家關注~

---

一、組件名

       定義組件名有兩種方式，分別是：kebab-case和PascalCase。

1、使用kebab-case

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

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

2、使用PascalCase

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

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

二、全局註冊

       使用Vue.component註冊組件屬於全局註冊。

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

       全局註冊之後可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。

三、局部註冊

       全局註冊往往是不夠理想的。比如，如果使用一個像 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
  },
  // ...
}

四、模塊系統

1、在模塊系統中局部註冊

       創建一個 components 目錄，並將每個組件放置在其各自的文件中。然後需要在局部註冊之前導入每個想使用的組件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

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

2、基礎組件的自動化全局註冊

        可能有的許多組件只是包裹了一個輸入框或按鈕之類的元素，是相對通用的。我們有時候會把它們稱爲基礎組件，它們會在各個組件中被頻繁的用到。所以會導致很多組件裏都會有一個包含基礎組件的長列表：

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