vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè),無需再單獨(dú)引用
更新時(shí)間：2022年03月29日 10:30:16 作者：周郭郭先生
這篇文章主要介紹了vue實(shí)現(xiàn)全局組件自動(dòng)注冊(cè)，無需再單獨(dú)引用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue全局組件自動(dòng)注冊(cè)
1、在components目錄下創(chuàng)建一個(gè)global目錄，里面放置一些需要全局注冊(cè)的組件。
index.js作用只要是引入main.vue，導(dǎo)出組件對(duì)象
2、在components中創(chuàng)建一個(gè)index.js，用來掃描全局對(duì)象并自動(dòng)注冊(cè)。
3、最后在入口文件main.js中導(dǎo)入這個(gè)index.js中就可以了
4、直接使用
自動(dòng)化注冊(cè)全局組件腳本
今天有一個(gè)idea，vue一些組件，可能會(huì)全局都用到，我覺得在main.js寫
Vue.component(name, instance)
然后很命令式，寫著也不好看，想著能夠有一個(gè)函數(shù)可以指定加載比如components下的文件，自動(dòng)完成全局化注冊(cè)，想起來就很帥
放代碼：
export function autoLoadingGlobalComponent() {
? const requireComponent = require.context(
? ? // 其組件目錄的相對(duì)路徑
? ? '../components',
? ? // 是否查詢其子目錄
? ? false,
? ? // 匹配vue后綴文件名的文件
? ? /\.vue$/
? )
? // 遍歷獲取到的文件名，依次進(jìn)行全局注冊(cè)
? requireComponent.keys().forEach(fileName => {
? ? // 獲取組件配置(實(shí)例)
? ? const componentConfig = requireComponent(fileName)
? ? // 獲取組件的 PascalCase 命名(eg: MYHeader)
? ? const componentName = _.upperFirst(
? ? ? // 獲取駝峰式命名
? ? ? _.camelCase(
? ? ? ? // 剝?nèi)ノ募_頭的 `./` 和結(jié)尾的擴(kuò)展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊(cè)組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的，
? ? ? // 那么就會(huì)優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了利用vscode編寫vue簡(jiǎn)單配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue 代碼高亮插件全面對(duì)比測(cè)評(píng)
這篇文章主要介紹了vue 代碼高亮插件全面對(duì)比測(cè)評(píng)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
簡(jiǎn)單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)vue中的依賴收集與響應(yīng)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文2018-05-05
vue3+ts實(shí)現(xiàn)樹形組件(菜單組件)
本文主要介紹了vue3+ts實(shí)現(xiàn)樹形組件(菜單組件)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經(jīng)找到了一個(gè)比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報(bào)錯(cuò)問題解決方案的相關(guān)資料,dataV用于大屏展示,個(gè)人覺得比echarts簡(jiǎn)單很多,需要的朋友可以參考下2023-06-06
VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁步驟詳情
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue、element實(shí)現(xiàn)表格表頭縱向顯示方式
這篇文章主要介紹了vue、element實(shí)現(xiàn)表格表頭縱向顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10