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"導出的，優(yōu)先使用".default"，
// 否則退回到使用模塊的根
Vue.component(names,comp.default || comp);
})

<script>
// 引入所有需要的動態(tài)組件
const components = require.context(
"./", //組件所在目錄的相對路徑
true, //是否查詢其子目錄
/\w+.vue$/ //匹配基礎(chǔ)組件文件名的正則表達式
);
const comObj = {};
components.keys().forEach(fileName => {
// 獲取文件名
var names = fileName.split("/").pop().replace(/.\w+$/, "");
// 獲取組件配置
const comp = components(fileName);
// 若該組件是通過"export default"導出的，優(yōu)先使用".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>