Vue一次性簡(jiǎn)潔明了引入所有公共組件的方法
使用場(chǎng)景
-在開發(fā)過程中,往往會(huì)有很多自己定義公用組件,我們通過import 導(dǎo)入,components掛載到實(shí)例上就行,項(xiàng)目剛開始還好,但是隨著項(xiàng)目迭代,組件越來越多,同一個(gè)組件不同的方式用需要重復(fù)導(dǎo)入掛載,就顯得冗余
這里是通過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 下的所有組件全部讀取出來 // // // requireComponents: ƒ webpackContext(req) { // return __webpack_require__(webpackContextResolve(req)); // } /** * @var requireComponents -- requireComponents保存每個(gè)文件的相對(duì)路徑的集合,可通過keys()返回 * @function requireComponents -- 也是個(gè)方法,傳入keys()枚舉出來的路徑可返回組件實(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) })
具體的只要打印出來就一目了然,這里不做贅述
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟
在前端 Vue 項(xiàng)目打包后,如果需要訪問另一個(gè)域名下的接口,由于瀏覽器的同源策略限制,會(huì)出現(xiàn)跨域問題,本文就介紹一下vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟,感興趣的可以了解一下2023-05-05vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03