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

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

必须使用 vue自带defineAsyncComponent的api

<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>
147 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注