vue實現(xiàn)全局組件自動注冊,無需再單獨引用
更新時間：2022年03月29日 10:30:16 作者：周郭郭先生
這篇文章主要介紹了vue實現(xiàn)全局組件自動注冊，無需再單獨引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue全局組件自動注冊
1、在components目錄下創(chuàng)建一個global目錄，里面放置一些需要全局注冊的組件。
index.js作用只要是引入main.vue，導(dǎo)出組件對象
2、在components中創(chuàng)建一個index.js，用來掃描全局對象并自動注冊。
3、最后在入口文件main.js中導(dǎo)入這個index.js中就可以了
4、直接使用
自動化注冊全局組件腳本
今天有一個idea，vue一些組件，可能會全局都用到，我覺得在main.js寫
Vue.component(name, instance)
然后很命令式，寫著也不好看，想著能夠有一個函數(shù)可以指定加載比如components下的文件，自動完成全局化注冊，想起來就很帥
放代碼：
export function autoLoadingGlobalComponent() {
? const requireComponent = require.context(
? ? // 其組件目錄的相對路徑
? ? '../components',
? ? // 是否查詢其子目錄
? ? false,
? ? // 匹配vue后綴文件名的文件
? ? /\.vue$/
? )
? // 遍歷獲取到的文件名，依次進行全局注冊
? requireComponent.keys().forEach(fileName => {
? ? // 獲取組件配置(實例)
? ? const componentConfig = requireComponent(fileName)
? ? // 獲取組件的 PascalCase 命名(eg: MYHeader)
? ? const componentName = _.upperFirst(
? ? ? // 獲取駝峰式命名
? ? ? _.camelCase(
? ? ? ? // 剝?nèi)ノ募_頭的 `./` 和結(jié)尾的擴展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個組件選項是通過 `export default` 導(dǎo)出的，
? ? ? // 那么就會優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近小編接到一個項目pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應(yīng)頁面，下面小編給大家分享實現(xiàn)過程，一起看看吧2021-11-11
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),這篇文章主要給大家介紹了關(guān)于vue調(diào)試工具沒有Pinia模塊的簡單解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-02-02
由于一些演示需要對一些簡單頁面進行配置,由于打包build后的vue項目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇vue項目中跳轉(zhuǎn)到外部鏈接的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了如何在vue中使用jsx語法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個名為 default 的插槽,并將當前行的數(shù)據(jù)傳遞給一個名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue分頁組件的實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化,在Vue.js中可以通過watch監(jiān)聽屬性變化并動態(tài)修改其他屬性的值,watch通過監(jiān)聽器函數(shù)接收新舊值,實現(xiàn)屬性間的數(shù)據(jù)聯(lián)動,需要的朋友可以參考下2024-12-12
解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題
今天小編就為大家分享一篇解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04