本文實(shí)例講述了Vue 組件注冊(cè)。分享給大家供大家參考，具體如下：

1 組件名

在注冊(cè)一個(gè)組件的時(shí)候，我們始終需要給它一個(gè)名字。比如在全局注冊(cè)的時(shí)候我們已經(jīng)看到了：

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

該組件名就是 Vue.component 的第一個(gè)參數(shù)。

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

你可以在風(fēng)格指南 中查閱到關(guān)于組件名的其它建議。

2 組件名大小寫

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

使用 kebab-case

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

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

使用 PascalCase

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

當(dāng)使用 PascalCase (駝峰式命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時(shí)只有 kebab-case 是有效的。

3 全局注冊(cè)

到目前為止，我們只用過 Vue.component 來創(chuàng)建組件：

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

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

html：

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

js：

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

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

4 局部注冊(cè)

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

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

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

然后在 components 選項(xiàng)中定義你想要使用的組件：

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

對(duì)于 components 對(duì)象中的每個(gè)屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個(gè)組件的選項(xiàng)對(duì)象。

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

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

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

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

注意在 ES2015+ 中，在對(duì)象中放一個(gè)類似 ComponentA 的變量名其實(shí)是 ComponentA: ComponentA 的縮寫，即這個(gè)變量名同時(shí)是：

• 用在模板中的自定義元素的名稱。
• 包含了這個(gè)組件選項(xiàng)的變量名。

5 模塊系統(tǒng)

如果你沒有通過 import/require 使用一個(gè)模塊系統(tǒng)，也許可以暫且跳過。如果你使用了，那么我們會(huì)為你提供一些特殊的使用說明和注意事項(xiàng)。

5.1 在模塊系統(tǒng)中局部注冊(cè)

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

然后你需要在局部注冊(cè)之前導(dǎo)入每個(gè)你想使用的組件。例如，在一個(gè)假設(shè)的 ComponentB.js 或 ComponentB.vue 文件中：

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

現(xiàn)在 ComponentA 和 ComponentC 都可以在 ComponentB的模板中使用了。

5.2 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

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

所以會(huì)導(dǎo)致很多組件里都會(huì)有一個(gè)包含基礎(chǔ)組件的長(zhǎng)列表：

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 (或在內(nèi)部使用了 webpack 的 Vue CLI 3+ )，那么就可以使用 require.context 只全局注冊(cè)這些非常通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
 // 其組件目錄的相對(duì)路徑
 './components',
 // 是否查詢其子目錄
 false,
 // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
 /Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
 // 獲取組件配置
 const componentConfig = requireComponent(fileName)
 // 獲取組件的 PascalCase 命名
 const componentName = upperFirst(
  camelCase(
   // 剝?nèi)ノ募_頭的 `'./` 和結(jié)尾的擴(kuò)展名
   fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  )
 )
 // 全局注冊(cè)組件
 Vue.component(
  componentName,
  // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，
  // 那么就會(huì)優(yōu)先使用 `.default`，
  // 否則回退到使用模塊的根。
  componentConfig.default || componentConfig
 )
})

記住全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生。這里有一個(gè)真實(shí)項(xiàng)目情景下的示例。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

最新評(píng)論