vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)
參考官網(wǎng)：https://cn.vuejs.org/v2/guide/components-registration.html
在日常開(kāi)發(fā)中，有一些組件是比較常用，但是為了避免在開(kāi)發(fā)過(guò)程中不停地引入，或者在main.js中注冊(cè)，，或者每添加一個(gè)組件就需要手動(dòng)注冊(cè)一次。則直接進(jìn)行自動(dòng)化全局注冊(cè)。
自動(dòng)化全局注冊(cè)，官網(wǎng)上都詳細(xì)的說(shuō)明，以下是自己官網(wǎng)的說(shuō)明基礎(chǔ)上進(jìn)行了一個(gè)demo開(kāi)發(fā)實(shí)例：
1、自定義文件夾：
在src下新建一個(gè)components文件夾，用于存放組件。并新建一個(gè)用于存放需要自動(dòng)化全局注冊(cè)的組件，例如base。
2、在base文件夾下定義index.js，具體代碼如下示：
// 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)
import Vue from 'vue'
const requireComponent = require.context(
// 其組件目錄的相對(duì)路徑
'./',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 全局注冊(cè)組件
Vue.component(
componentConfig.default.name, // 此處的name,是組件屬性定義的name
// 如果這個(gè)組件選項(xiàng)是通過(guò) `export default` 導(dǎo)出的，
// 那么就會(huì)優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根。
componentConfig.default
)
})
以上代碼需要解釋的地方：
1、匹配基礎(chǔ)組件文件名的正則表達(dá)式，此處需要根據(jù)實(shí)際的組件名稱和規(guī)則進(jìn)行配置；
2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫(xiě)法?？梢杂貌煌膶?xiě)法來(lái)表示組件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來(lái)自于組件定義的時(shí)候頁(yè)面的name。若頁(yè)面沒(méi)有定義name，則報(bào)錯(cuò)。
3、在main.js中引入index.js文件
由于全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過(guò) new Vue) 創(chuàng)建之前發(fā)生。
// 基礎(chǔ)組件的自動(dòng)化全局注冊(cè)。全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過(guò) new Vue) 創(chuàng)建之前發(fā)生 import './components/base/index'
4、直接在需要的地方使用該組件即可
頁(yè)面效果如下示：
以上就是vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)的詳細(xì)內(nèi)容，更多關(guān)于vue 組件全局注冊(cè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
今天小編就為大家分享一篇vue點(diǎn)擊自增和求和的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue如何獲取url路由地址和參數(shù)簡(jiǎn)單示例
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過(guò)簡(jiǎn)單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫(xiě)后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件解析
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之函數(shù)化組件探究，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯(cuò)誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue + any-touch實(shí)現(xiàn)一個(gè)iscroll 實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫(huà)效果
這篇文章主要介紹了vue + any-touch實(shí)現(xiàn)一個(gè)iscroll實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07