詳解Vue注冊組件的方法
簡介
說明
本文介紹Vue注冊組件的方法。
Vue注冊組件有這幾種：全局注冊、局部注冊、在模塊系統(tǒng)中注冊。
官網(wǎng)網(wǎng)址
https://v2.cn.vuejs.org/v2/guide/components-registration.html
組件名字
注冊一個組件的時候，需要給它一個名字。比如在全局注冊：
Vue.component('my-component-name', { /* ... */ })組件名是 Vue.component 的第一個參數(shù)。
當直接在 DOM 中使用一個組件 (而不是在字符串模板或單文件組件) 的時候，強烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫且必須包含一個連字符)。這會幫助你避免和其他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('my-component-name', {
// ... 選項 ...
})或者
Vue.component("tmp2", Vue.extend({
template: "<p>通過 Vue.extend 創(chuàng)建的 tmp2 組件</p>"
}));上邊第1種寫法（沒有Vue.extend）：Vue默認自動調(diào)用Vue.extend()。
示例
Vue.component("counter",
{
data(){
return {count:0}
},
template: '<button v-on:click="count++">點擊計算點擊次數(shù)：{{count}}次</button>'
}
)這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的 Vue 根實例 (new Vue) 的模板中。
很多Vue的前端框架都是全局注冊組件的，例如vue-element-admin：
src/index.js：
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
// 其他代碼
const components = [
Pagination,
Dialog,
// 其他代碼
];
const install = function(Vue, opts = {}) {
// 其他代碼
components.forEach(component => {
Vue.component(component.name, component);
});
}局部注冊（不常用）
說明
有些場景不適合使用全局注冊。比如，使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。
在這些情況下，可以通過一個普通的 JavaScript 對象來定義組件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }然后在 components 選項中定義你想要使用的組件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})對于 components 對象中的每個 property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個組件的選項對象。
局部注冊的組件在其子組件中不可用
例如，如果你希望 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 的縮寫，即這個變量名同時是：
- 用在模板中的自定義元素的名稱
- 包含了這個組件選項的變量名
模塊系統(tǒng)
在模塊系統(tǒng)中局部注冊（常用）
項目中我們一般使用Babel 或 webpack 的模塊系統(tǒng)。這時，我們一般創(chuàng)建一個 components 目錄，并將每個組件放置在其各自的文件中。
然后在局部注冊之前導(dǎo)入每個你想使用的組件。例如，在一個假設(shè)的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}現(xiàn)在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
基礎(chǔ)組件的自動化全局注冊
通用組件一般只包裹了一個輸入框或按鈕之類的元素，可以把它們稱為基礎(chǔ)組件。各個組件都會用到這些通用組件。
這樣會導(dǎo)致組件里都會有一個包含基礎(chǔ)組件的長列表：
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}但這個基礎(chǔ)組件只是用于模板中的一小部分：
<BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton>
如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注冊這些非常通用的基礎(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(
// 其組件目錄的相對路徑
'./components',
// 是否查詢其子目錄
false,
// 匹配基礎(chǔ)組件文件名的正則表達式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 獲取組件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 獲取和目錄深度無關(guān)的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注冊組件
Vue.component(
componentName,
// 如果這個組件選項是通過 `export default` 導(dǎo)出的，
// 那么就會優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根。
componentConfig.default || componentConfig
)
})
全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生。
到此這篇關(guān)于Vue注冊組件的方法的文章就介紹到這了,更多相關(guān)Vue注冊組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了用vue簡單的實現(xiàn)點擊按鈕切換背景顏色，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄
在使用webstorm新建vue項目時常會遇到一些報錯,特別是新手第一次運行項目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄,需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標簽form表單上傳、elementui自帶的el-upload上傳以及elementui實現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
本篇文章主要介紹了vue項目使用sass的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
前幾天朋友在做vue項目開發(fā)時，有人反映 IOS 上面的滑動點擊有點問題，讓我們來幫忙解決，于是我就重寫了代碼，下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺，需要的朋友參考下吧2018-03-03
使vue實現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
本篇文章主要介紹了Vue學(xué)習(xí)筆記之表單輸入綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下2023-10-10
Vue+Element UI實現(xiàn)概要小彈窗的全過程
彈窗效果是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于Vue+Element UI實現(xiàn)概要小彈窗的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue.js中created方法作用及mounted和created的區(qū)別介紹，需要的朋友可以參考下2018-03-03