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