[转载]vue中全局和局部引入批量组件方法

来源：https://blog.csdn.net/Dalin0929/article/details/104557131

---------------------------------------------------------------------------------------------

前言：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文件中引入了这些组件，其他页面若要使用需再次引入。）

<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>

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

通过事件改变is绑定的isWhich值即可切换成不同的组件，isWhich的值为组件名称。
————————————————
版权声明：本文为CSDN博主「Dalin0929」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Dalin0929/java/article/details/104557131