vue动态导入组件并使用指定组件

<template>
    <!-- 默认 动态引用组件 -->
    <div>
        <component :is="Component"></component>
    </div>
</template>

<script>
    import { defineAsyncComponent } from "vue"

    export default {
        data() {
            return {
                Name: 'Default',
                Component: null // 初始化为 null  
            };
        },
        created() {
            this.loadComponent(); // 在组件创建时加载组件  
        },
        methods: {
            //异步动态载入组件
            async loadComponent() {
                // 动态导入全部组件地址
                const comList = await import.meta.glob("/src/template/**/**/**.vue");
                // 使用指定组件
                this.Component = defineAsyncComponent(comList[`/src/template/${this.Name}/Home/index.vue`])
            }
        }
    }
</script>