vue 優化小技巧 之 require.context()

一、require.context()

回憶一下 當咱們引入組件時 

 第一步 建立一個子組件 

 第二步 import ... form ...   

 第三步 components:{..}     

 第四步 頁面使用 <...></...>

　　代碼實現:　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　         

   

目錄結構:components /  context  / subset

            

頁面效果

  

以上一共五個子組件 大量重複的代碼 

 

 看到這裏就開始步入正題嘍~

require.context(directory,useSubdirectories,regExp)

接收三個參數:

directory：說明須要檢索的目錄

useSubdirectories：是否檢索子目錄     (此例中 : 當爲true時 subsetone可用)

regExp: 匹配文件的正則表達式,通常是文件名

<template>
  <div>
    <one></one>
    <two></two>
    <three></three>
    <four></four>
    <!-- <subsetone></subsetone> -->
  </div>
</template>
<script>

const path = require("path");
const files = require.context("@/components/context", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key); });

export default {
  components: modules,
  data() {
    return {};
  },
  methods: {},
        
};
</script> 

東西學會了 那使用場景呢~~  

假設一個頁面不少的彈框 不少的下鑽頁 這時候咱們就能夠把他們有規律的放在一個文件夾裏 
例如 a文件 --裏面是A的子組件集合
　　 b文件 --裏面是B的子組件集合    

這時候引入組件就能夠吧a文件一次性引入A組件中 同b---B  

(ps:若是你非要都混在一個文件裏  那你能夠選擇都引入選擇性使用 或者還用之前辦法一個一個找 還能夠給一個規律正則匹配  我的認爲這樣文件夾不清楚不利於交接也不利於後期維護 )

參考連接：https://juejin.im/post/5d9d386fe51d45784d3f8637