溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用場景
-在開發過程中,往往會有很多自己定義公用組件,我們通過import 導入,components掛載到實例上就行,項目剛開始還好,但是隨著項目迭代,組件越來越多,同一個組件不同的方式用需要重復導入掛載,就顯得冗余
這里是通過require.context的一種便捷操作
實例
文件結構
component/modal里存放的是我們定義的公共DOM組件
// 導入Vue, 需要使用Vue.component()方法注冊組件
import Vue from 'vue'
// let f = r => {
// return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/)));
// 將 ./modal 下的所有組件全部讀取出來
//
//
// requireComponents: ƒ webpackContext(req) {
// return __webpack_require__(webpackContextResolve(req));
// }
/**
* @var requireComponents -- requireComponents保存每個文件的相對路徑的集合,可通過keys()返回
* @function requireComponents -- 也是個方法,傳入keys()枚舉出來的路徑可返回組件實例
*/
const requireComponents = require.context('./', true, /\.vue/);
// 打印結果
// requireComponents: ƒ webpackContext(req) {
// return __webpack_require__(webpackContextResolve(req));
// }
//
// 遍歷出每個組件的路徑
requireComponents.keys().forEach(fileName => {
// 組件實例
const reqCom = requireComponents(fileName)
// 截取路徑作為組件名
const reqComName = fileName.split('/')[1]
// 組件掛載
Vue.component(reqComName, reqCom.default || reqCom)
})
具體的只要打印出來就一目了然,這里不做贅述
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
