Vue一次性簡潔明了引入所有公共組件的方法
更新時間：2018年11月28日 09:42:17 作者：茶樹菇小學(xué)生
這篇文章主要介紹了Vue一次性簡潔明了引入所有公共組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用場景
-在開發(fā)過程中,往往會有很多自己定義公用組件,我們通過import 導(dǎo)入,components掛載到實例上就行,項目剛開始還好,但是隨著項目迭代,組件越來越多,同一個組件不同的方式用需要重復(fù)導(dǎo)入掛載,就顯得冗余
這里是通過require.context的一種便捷操作
實例
文件結(jié)構(gòu)
component/modal里存放的是我們定義的公共DOM組件
// 導(dǎo)入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/);
// 打印結(jié)果
// 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)
})
具體的只要打印出來就一目了然,這里不做贅述
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue從使用到源碼實現(xiàn)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js分頁中單擊頁碼更換頁面內(nèi)容的方法(配合spring springmvc)
下面小編就為大家分享一篇vue.js分頁中單擊頁碼更換頁面內(nèi)容的方法(配合spring springmvc)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Pinia是一個同時支持Vue2和Vue3的應(yīng)用狀態(tài)管理工具,簡單來說就是為了管理整個應(yīng)用中的響應(yīng)式數(shù)據(jù),解決各個組件交互時數(shù)據(jù)狀態(tài)的不好管理的問題,下面這篇文章主要給大家介紹了關(guān)于vue3搭配pinia踩坑的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue項目debugger調(diào)試看不到源碼的問題及解決
這篇文章主要介紹了vue項目debugger調(diào)試看不到源碼的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時候，里面的圖標組件是經(jīng)過處理的，結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-01-01
dhtmlxGantt是一個強大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務(wù)和進度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04
vue-meta實現(xiàn)router動態(tài)設(shè)置meta標簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設(shè)置meta標簽,實現(xiàn)思路非常簡單內(nèi)容包括mata標簽的特點和mata標簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細講解需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
跨域問題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問,它只是一個前端框架,負責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問題的常用方式,需要的朋友可以參考下2023-10-10