Vue一次性簡潔明了引入所有公共組件的方法
更新時間：2018年11月28日 09:42:17 作者：茶樹菇小學生
這篇文章主要介紹了Vue一次性簡潔明了引入所有公共組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用場景
-在開發(fā)過程中,往往會有很多自己定義公用組件,我們通過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)
})
具體的只要打印出來就一目了然,這里不做贅述
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue路由vue-router詳細講解指南，對vue-router感興趣的同學，可以參考下2021-04-04
vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
在前端 Vue 項目打包后，如果需要訪問另一個域名下的接口，由于瀏覽器的同源策略限制，會出現(xiàn)跨域問題，本文就介紹一下vue項目打包部署跨域的實現(xiàn)步驟，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了Vue中自定義一個鈴聲提示音組件的實現(xiàn)以及使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-01-01
這篇文章主要給大家介紹了關于vue打開新窗口并實現(xiàn)傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關于vue2.x中$attrs使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11