欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解

 更新時(shí)間：2023年07月07日 14:50:18   作者：littlesunn  
這篇文章主要為大家介紹了vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

批量引入組件.vue后綴或.js,或.ts文件

有時(shí)候有大量的組件.vue后綴的,或.js,或.ts文件, 需要一個(gè)個(gè)的手動(dòng)引入很麻煩,那么你可以嘗試這樣創(chuàng)建一個(gè)index.js

本項(xiàng)目使用vue3.x, vue2.x也可以照樣用;

這里在components里面創(chuàng)建了一個(gè)idnex.js 文件

require.context 讀取文件

第一個(gè)參數(shù)是指當(dāng)前文件夾, 第二個(gè)參數(shù)是是否遞歸遍歷尋找子節(jié)點(diǎn)設(shè)為ture, 第三個(gè)正則匹配

//自動(dòng)注冊(cè),不必一個(gè)個(gè)導(dǎo)入導(dǎo)出
const requireComponent = require.context(
  // 其組件目錄的相對(duì)路徑
  './',
  // 是否查詢(xún)其子目錄,遞歸查詢(xún)
  true,
  // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
  /.(vue)$/
)
var fileArr:any[] = [] //導(dǎo)出路由對(duì)象
requireComponent.keys().forEach((fileName) => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName)
  let compName = fileName.split("/")[fileName.split("/").length - 1].split(".")[0];
  if (componentConfig.default) {
    fileArr.push({
        name: compName,
        compnent: componentConfig.default
    })
  }
})
export default fileArr;

這樣你就得到了一個(gè)數(shù)組,數(shù)組里面多個(gè)組件的對(duì)象,有名字,有組件內(nèi)容,詳情可以自己打印試試;

main.ts中引用

fileArr.forEach(item=>{
    console.log(item.name, item.compnent);
    vue.component(item.name, item.compnent);   //全局注冊(cè)了
})

遍歷fileArr,將所有的組件都注冊(cè)進(jìn)去;這樣就是全局注冊(cè)了,使用的時(shí)候就不用一個(gè)一個(gè)的import了,這種做法小項(xiàng)目可以用,但是大型項(xiàng)目太多文件都全局注冊(cè)恐怕會(huì)影響性能;

按照這個(gè)思路,比如路由啊,api啊還有狀態(tài)管理這些模塊化的,大量的文件都不需要手動(dòng)import了,只要你創(chuàng)建了這個(gè)文件,就會(huì)被自動(dòng)讀取;

以上就是vue 批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue引入注冊(cè)組件路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論