vue進階內容總結--組件註冊（一）

組件註冊

 

組件名

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

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

該組件名就是 Vue.component 的第一個參數（my-component-name）。

 

你給予組件的名字可能依賴於你打算拿它來做什麼。當直接在 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,
        'component-c':componentC
    }
})

對於 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:componentA, //ComponentA
        componentC:componentC  //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="serch">
    <BaseIcon name="search">
</BaseButton>

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

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import caselCase 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）創建之前發生。