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

前言：Dalin在开发的时候使用到动态组件，但由于需要切换的组件太多，并且不确定到底有哪些需要切换的组件，这样的话，使用import一个一个引入是不可取的，想到官网上提供了批量引入组件的方法，用起来果然方便高效多了。

一、全局批量引入

创建一个.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);
})

二、局部批量引入

（ 相当于在这个.vue文件中引入了这些组件，其他页面若要使用需再次引入。）

三、动态组件使用方法

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

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