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

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>

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