如何批量引入组件？

Answer 1

vue中全局和局部引入批量组件方法

一、全局批量引入

创建一个.js文件，并在main.js中引入即可。

import Vue from "vue"
import upperFirst from "lodash/upperFirst"
import camelCase from "lodash/camelCase"
const requireComponent = require.context(
    './', //组件所在目录的相对路径
    false, //是否查询其子目录
    /Base[A-Z]\w+\.(vue|js)$/ //匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName=>{
    // 获取文件名
    var names = fileName.split("/").pop().replace(/\.\w+$/,"");//BaseBtn
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 若该组件是通过"export default"导出的，优先使用".default"，
    // 否则退回到使用模块的根
    Vue.component(names,componentConfig.default || componentConfig);
})

二、局部批量引入

<template>
    <div>
        <component v-bind:is="isWhich"></component>
    </div>
</template>
<script>
// 引入所有需要的动态组件
const requireComponent = require.context(
  "./", //组件所在目录的相对路径
  true, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
var comObj = {};
requireComponent.keys().forEach(fileName => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});
export default {
  data() {
    return {
        isWhich: ""
    }
  },
  mounted() {},
  components: comObj
};
</script>

三、动态组件使用方法

<keep-alive>
    <component :is="isWhich"></component>
</keep-alive>

使用标签保存状态，即切换组件再次回来依然是原来的样子，页面不会刷新，若不需要可以去掉。

通过事件改变is绑定的isWhich值即可切换成不同的组件，isWhich的值为组件名称。