快捷導(dǎo)航

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

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

這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊(cè)和使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

一、使用場(chǎng)景

在日常開(kāi)發(fā)中，經(jīng)常會(huì)有這樣一種情況：

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

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

二、使用步驟

涉及到：

組件名稱(chēng)為帶中橫線(xiàn)規(guī)范，最后要轉(zhuǎn)為駝峰命名法的功能；
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">
      	<!-- 通過(guò)is屬性，綁定對(duì)應(yīng)的組件名稱(chēng)，展示對(duì)應(yīng)的組件 -->
        <component :is="activeComponent"></component>
      </div>
    </div>
  </div>
</template>

3.js代碼

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

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

返回值：兩個(gè)方法一個(gè)屬性

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

<script>
// 中橫線(xiàn)轉(zhuǎn)駝峰
var camelCase = function (s) {
  return s.replace(/-\w/g, function (x) {
    return x.slice(1).toUpperCase();
  });
};
// 批量引入子組件  重點(diǎn)，語(yǔ)法見(jiàn)上
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$

//制作組件數(shù)組，在下方components中注冊(cè)使用
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代碼（可不看，寫(xiě)出來(lái)只是為了代碼完整性，拿來(lái)可以直接運(yùn)行展示）

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