怎么在vue中批量引入組件

今天就跟大家聊聊有關怎么在vue中批量引入組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

一、使用場景

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

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

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

二、使用步驟

涉及到：

• 組件名稱為帶中橫線規范，最后要轉為駝峰命名法的功能；

• 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:執行環境的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>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

看完上述內容，你們對怎么在vue中批量引入組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。