vue如何批量引入組件、注冊和使用詳解

更新時間：2021年05月12日 12:47:50 作者：周小盜

這篇文章主要給大家介紹了關于vue如何批量引入組件、注冊和使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

組件是我們非常常用的東西，很多人使用組件都是通過一個一個文件去引用和注冊。這篇文章就來介紹下vue批量引入組件、注冊和使用的方法。

一、使用場景

在日常開發(fā)中，經常會有這樣一種情況：

	import A from 'components/A'
	import B from 'components/B'
	import C from 'components/C'
	import D from 'components/D'

遇到這種重復的代碼，就在想，是否可以進行以下優(yōu)化，一次性全部引入。于是就找到了webpack的api，通過調用require.context來進行處理，具體代碼如下：

二、使用步驟

涉及到：

組件名稱為帶中橫線規(guī)范，最后要轉為駝峰命名法的功能；
component的is屬性；

具體詳解都在代碼中：

1.文件目錄

2.HTML代碼

<template>
  <div class="water-analysis">
    <div class="content-box" ref="contentbox">
      <a-tabs :default-active-key="activeComponent" @change="tabChangeHandle">
        <a-tab-pane
          v-for="item in tabList"
          :key="item.key"
          :tab="item.tab"
        ></a-tab-pane>
      </a-tabs>
      <div class="tab-pane-box">
      	<!-- 通過is屬性，綁定對應的組件名稱，展示對應的組件 -->
        <component :is="activeComponent"></component>
      </div>
    </div>
  </div>
</template>

3.js代碼

語法：require.context(directory, useSubdirectories, regExp)

directory: 要查找的文件路徑
useSubdirectories: 是否查找子目錄
regExp: 要匹配文件的正則

返回值：兩個方法一個屬性

keys(): 返回匹配成功模塊的名字組成的數組
resolve(): 接受一個參數request，request為test文件夾下面匹配文件的相對路徑，返回這個匹配文件相對于整個工程的相對路徑
id:執(zhí)行環(huán)境的id，返回的是一個字符串，主要用在module.hot.accept，應該是熱加載

<script>
// 中橫線轉駝峰
var camelCase = function (s) {
  return s.replace(/-\w/g, function (x) {
    return x.slice(1).toUpperCase();
  });
};
// 批量引入子組件  重點，語法見上
const allComponents = require.context("./comp", false, /\.vue$/);

console.log(allComponents.keys())
// ["./tem-a.vue", "./tem-b.vue", "./tem-c.vue", "./tem-d.vue"]

console.log(allComponents.id)
//./src/views/tempManage/comp sync \.vue$

//制作組件數組，在下方components中注冊使用
let resComponents = {};
allComponents.keys().forEach(comName => {
  let name = camelCase(comName);
  const comp = allComponents(comName);
  resComponents[name.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});

export default {
  name: "WaterQuery",
  components: resComponents,
  data() {
    return {
      activeComponent: "temA",
      tabList: [
        {
          key: "temA",
          tab: "A組件",
        },
        {
          key: "temB",
          tab: "B組件",
        },
        {
          key: "temC",
          tab: "C組件",
        },
        {
          key: "temD",
          tab: "D組件",
        },
      ],
    };
  },
  created() {
    if (this.$route.query["val"]) {
      this.activeComponent = this.$route.query["val"];
    }
  },
  methods: {
    // 切換tab欄
    tabChangeHandle(val) {
      const {path} = this.$router;

      this.$router.push({
        path,
        query: {val},
      });
      this.activeComponent = val;
    },
  },
};
</script>

4.css代碼（可不看，寫出來只是為了代碼完整性，拿來可以直接運行展示）

<style scoped>
.water-analysis {
  height: 100%;
  overflow: auto;
}
.content-box {
  height: 100%;
}
.tab-pane-box {
  height: calc(100% - 62px);
}
</style>