-在開(kāi)發(fā)過(guò)程中,往往會(huì)有很多自己定義公用組件,我們通過(guò)import 導(dǎo)入,components掛載到實(shí)例上就行,項(xiàng)目剛開(kāi)始還好,但是隨著項(xiàng)目迭代,組件越來(lái)越多,同一個(gè)組件不同的方式用需要重復(fù)導(dǎo)入掛載,就顯得冗余

這里是通過(guò)require.context的一種便捷操作

實(shí)例

文件結(jié)構(gòu)

component/modal里存放的是我們定義的公共DOM組件

// 導(dǎo)入Vue, 需要使用Vue.component()方法注冊(cè)組件
import Vue from 'vue'

// let f = r => {
//  return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/)));

// 將 ./modal 下的所有組件全部讀取出來(lái)
//
//
// requireComponents: ƒ webpackContext(req) {
//   return __webpack_require__(webpackContextResolve(req));
// }

/**
 * @var requireComponents -- requireComponents保存每個(gè)文件的相對(duì)路徑的集合,可通過(guò)keys()返回
 * @function requireComponents -- 也是個(gè)方法,傳入keys()枚舉出來(lái)的路徑可返回組件實(shí)例
 */

const requireComponents = require.context('./', true, /\.vue/);
// 打印結(jié)果
// requireComponents: ƒ webpackContext(req) {
//   return __webpack_require__(webpackContextResolve(req));
// }
//

// 遍歷出每個(gè)組件的路徑
requireComponents.keys().forEach(fileName => {
 // 組件實(shí)例
 const reqCom = requireComponents(fileName)
 // 截取路徑作為組件名
 const reqComName = fileName.split('/')[1]
 // 組件掛載
 Vue.component(reqComName, reqCom.default || reqCom)
})

具體的只要打印出來(lái)就一目了然,這里不做贅述

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 全局loading組件實(shí)例詳解
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下
2018-05-05
vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
Vite+TS+Vue開(kāi)啟eslint和prettier規(guī)范及校驗(yàn)方式
這篇文章主要介紹了Vite+TS+Vue開(kāi)啟eslint和prettier規(guī)范及校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue cli webpack中使用sass的方法
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下
2018-02-02
Vue路由vue-router詳細(xì)講解指南
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對(duì)vue-router感興趣的同學(xué)，可以參考下
2021-04-04
vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟
在前端 Vue 項(xiàng)目打包后，如果需要訪問(wèn)另一個(gè)域名下的接口，由于瀏覽器的同源策略限制，會(huì)出現(xiàn)跨域問(wèn)題，本文就介紹一下vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟，感興趣的可以了解一下
2023-05-05
Vue自定義鈴聲提示音組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue中自定義一個(gè)鈴聲提示音組件的實(shí)現(xiàn)以及使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-01-01
vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue2.x中$attrs的使用方法教程
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場(chǎng)景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11