vue中如何批量引入组件
# 1. 全局批量引入
创建一个.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);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 2. 局部批量引入
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 3. 动态组件使用方法
<keep-alive>
<component :is="isWhich"></component>
</keep-alive>
1
2
3
2
3
使用标签保存状态，即切换组件再次回来依然是原来的样子，页面不会刷新，若不需要可以去掉。
通过事件改变is绑定的isWhich值即可切换成不同的组件，isWhich的值为组件名称。