vue實現(xiàn)全局組件自動注冊,無需再單獨引用

更新時間：2022年03月29日 10:30:16 作者：周郭郭先生

這篇文章主要介紹了vue實現(xiàn)全局組件自動注冊，無需再單獨引用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue全局組件自動注冊

1、在components目錄下創(chuàng)建一個global目錄，里面放置一些需要全局注冊的組件。

index.js作用只要是引入main.vue，導出組件對象

2、在components中創(chuàng)建一個index.js，用來掃描全局對象并自動注冊。

3、最后在入口文件main.js中導入這個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)ノ募_頭的 `./` 和結尾的擴展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個組件選項是通過 `export default` 導出的，
? ? ? // 那么就會優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: