如何批量引入组件？

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的值为组件名称。