vue 动态引入组件、批量引入组件(vue2,vue3)

vue2

批量全局引入：

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

批量局部引入：

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

vue3

批量引入：

批量导入组件，在模板中利用动态组件component,根据key值渲染组件，注意这里的key类似‘./components/Component1.vue’这样的形式，如果需要去掉路径可以用函数处理再放入componentList

<template>
    <component :is="componentList[componentName]"></component>
</template>

<script lang="ts" setup>
const componentList: Record<string, any> = reactive({});
const components = import.meta.glob('./components/**/*.vue');
Object.entries(components).forEach(async ([key, val]) => {
   componentList[key] = defineAsyncComponent(val);
 });
 
const props = defineProps({
  componentName: {
    type: String,
    default: '',
  },
});
</script>

动态引入：

<template>
    <component :is="componentName"></component>
</template>

<script lang="ts" setup>
const props = defineProps({
  componentName: {
    type: String,
    default: '',
  },
});
const comp = defineAsyncComponent(() => import(`./components/${props.componentName}.vue`));
</script>