這篇文章主要介紹了Vue 組件註冊,結合實例形式較爲詳細的分析了vue.js組件的常見分類、註冊方法及相關操作注意事項,需要的朋友可以參考下
本文實例講述了Vue 組件註冊。分享給大家供大家參考,具體如下:
1 組件名
在註冊一個組件的時候,我們始終需要給它一個名字。比如在全局註冊的時候我們已經看到了:
Vue.component('my-component-name', { /* ... */ })
該組件名就是 Vue.component 的第一個參數。
你給予組件的名字可能依賴於你打算拿它來做什麼。當直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候,我們強烈推薦遵循 W3C 規範 中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和當前以及未來的 HTML 元素相沖突。
你可以在風格指南 中查閱到關於組件名的其它建議。
2 組件名大小寫
定義組件名的方式有兩種:
使用 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 是有效的。
3 全局註冊
到目前爲止,我們只用過 Vue.component
來創建組件:
Vue.component('my-component-name', { // ... 選項 ... })
這些組件是全局註冊的。也就是說它們在註冊之後可以用在任何新創建的 Vue 根實例 (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' })
在所有子組件中也是如此,也就是說這三個組件在各自內部也都可以相互使用。
4 局部註冊
全局註冊往往是不夠理想的。比如,如果你使用一個像 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
的縮寫,即這個變量名同時是:
- 用在模板中的自定義元素的名稱。
- 包含了這個組件選項的變量名。
5 模塊系統
如果你沒有通過 import/require 使用一個模塊系統,也許可以暫且跳過。如果你使用了,那麼我們會爲你提供一些特殊的使用說明和注意事項。
5.1 在模塊系統中局部註冊
如果你還在閱讀,說明你使用了諸如 Babel 和 webpack 的模塊系統。在這些情況下,我們推薦創建一個 components 目錄,並將每個組件放置在其各自的文件中。
然後你需要在局部註冊之前導入每個你想使用的組件。例如,在一個假設的 ComponentB.js 或 ComponentB.vue 文件中:
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }
現在 ComponentA 和 ComponentC 都可以在 ComponentB的模板中使用了。
5.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.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) // 全局註冊組件 Vue.component( componentName, // 如果這個組件選項是通過 `export default` 導出的, // 那麼就會優先使用 `.default`, // 否則回退到使用模塊的根。 componentConfig.default || componentConfig ) })
記住全局註冊的行爲必須在根 Vue 實例 (通過 new Vue
) 創建之前發生。這裏有一個真實項目情景下的示例。
希望本文所述對大家vue.js程序設計有所幫助。