vue require.context全局注冊(cè)組件的具體實(shí)現(xiàn)
? 作用：一個(gè) Webpack 提供的 API 方法，通過(guò) require.context() 函數(shù)可以獲取一個(gè)上下文，通常用來(lái)簡(jiǎn)化大量頻繁的引入組件操作。?
require.context() 接收三個(gè)參數(shù)：
directory：要查找的目錄路徑isFindSub?：是否查找子目錄regExp：要匹配的文件正則表達(dá)式
const req = require.context('./component',true,/\.vue$/)
過(guò)程：require.context() 執(zhí)行后會(huì)返回一個(gè) req 對(duì)象，該 req 對(duì)象中存在有一個(gè) keys() 方法成員，
keys() 文件路徑數(shù)組
? 作用：它會(huì)返回一個(gè) require.context() 方法在指定目錄下查找到的所有文件路徑數(shù)組。
const req = require.context('./component',true,/\.vue$/)
console.log(req.keys())
// ['./component/SvgIcon.vue','./component/Form/Login.vue','./component/Channel.vue'...]
req.keys().forEach(item => {
...
})在拿到所有待注冊(cè)組件的文件路徑之后，便可以傳給 req 對(duì)象本身進(jìn)行一個(gè) import 解構(gòu)導(dǎo)出操作。
一、定義2個(gè)組件
scr/components/ComponentsA/index.vue
<template>
<div>A組件</div>
</template>
<script>
export default {
name: 'ComponentA'
}
</script>scr/components/ComponentsB/BBB/BBBB/index.vue
<template>
<div>B組件</div>
</template>
<script>
export default {
name: 'ComponentB'
}
</script>二、局部使用這兩個(gè)組件
<template>
<div id="app">
<ComponentA />
<ComponentB />
</div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB/BBB/BBBB'
export default {
components: { ComponentA, ComponentB }
}
</script>三、全局注冊(cè)組件
如果這2個(gè)組件是基礎(chǔ)性的組件，項(xiàng)目中好多地方都要用到，可以注冊(cè)成全局組件
src/requireAllComponents.js
import Vue from 'vue'
const componentsContext = require.context('@/components', true, /index.vue$/) // true表示遞歸查找 正則匹配index.vue文件
componentsContext.keys().forEach(item => {
const componentConfig = componentsContext(item).default
Vue.component(componentConfig.name, componentConfig) // 全局注冊(cè)組件
})main.js
import './requireAllComponents'
此時(shí)，便不再需要在每個(gè)組件中都引入這種基礎(chǔ)組件了
到此這篇關(guān)于vue require.context全局注冊(cè)組件的文章就介紹到這了,更多相關(guān)vue require.context全局注冊(cè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)
這篇文章主要介紹了詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue生命周期中的八個(gè)鉤子函數(shù)相機(jī)
這篇文章主要為大家介紹了Vue生命周期中的八個(gè)鉤子函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了vue之如何實(shí)現(xiàn)打印功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
uniapp寬屏開發(fā)PC端方案及衍生問(wèn)題解決辦法
在uniapp中進(jìn)行寬屏開發(fā),主要是指在電腦端(PC端)使用寬屏顯示效果進(jìn)行應(yīng)用的開發(fā),這篇文章主要給大家介紹了關(guān)于uniapp寬屏開發(fā)PC端方案及衍生問(wèn)題解決辦法,需要的朋友可以參考下2024-03-03
Element-UI 多個(gè)el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號(hào))
有多個(gè)upload組件,每個(gè)都需要單獨(dú)上傳獲取文件（JS File類型）,不需要action上傳到指定url,自定義上傳動(dòng)作和http操作,下面通過(guò)本文給大家分享Element-UI 多個(gè)el-upload組件自定義上傳不用上傳url并且攜帶自定義傳參(文件序號(hào)),感興趣的朋友一起看看吧2024-06-06
vue項(xiàng)目使用js監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用js監(jiān)聽(tīng)瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
VUE跨域問(wèn)題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個(gè)錯(cuò)誤，VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù)，VUE跨域問(wèn)題Access to XMLHttpRequest at，本文就詳細(xì)的來(lái)介紹一下解決方法，感興趣的可以了解一下2022-05-05
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實(shí)例化時(shí)發(fā)生的，在組件中，可以通過(guò)data選項(xiàng)來(lái)定義組件的初始數(shù)據(jù)，需要詳細(xì)了解可以參考下文2023-05-05