vue3中如何通过遍历传入组件名称动态创建多个component组件

背景

在 vue3 中，如果使用 component，可以动态加载一个组件，例如

!--直接创建-->
    
component:is="Image"/>
    

这样会将已经定义好并导入的比如 Image 组件加载出来，但是如果将需要展示的自定义组件放在一个数组中，遍历展示，则无法展示成功。

!--动态创建方式1-->
    
divv-for="(comp,index)inrealTimeComponent":key="index">
    
component:is="comp"/>
    
/div>
    

!--动态创建方式2-->
    
componentv-for="(comp,index)inrealTimeComponent":key="index":is="comp"/>
    

scriptsetup>

import{
ref}
    from"Vue";
    
importImagefrom"@/customComponents/Image.vue";
    
constrealTimeComponent=ref(["Image"]);
    
/script>
    
或者
script>

import{
ref}
    from"Vue";
    
importImagefrom"@/customComponents/Image.vue";

exportdefault{

components:{

Image,
}
,
setup(){
    
constrealTimeComponent=ref(["Image"]);

}

}
    
/script>
    

展示效果如图：

解决

经过多次尝试发现，虽然要使用动态创建组件的父组件里已经动态导入并注册了子组件，但是始终无法显示遍历的Component 。

问题原因：

在遍历的时候，当前组件中导入并注册该组件无法识别，会认为没有注册该组件，从而展示image> /image>
但是，单独直接使用component :is="Image" /> 该页面中注册该组件，是可以被识别的。
解决方案：

使用 app.component 全局注册组件，循环遍历创建多个 component的时候可以生效。
全局创建方法：

//src/customComponents/index.js
importButtonfrom"@/customComponents/Button.vue";
    
importTextfrom"@/customComponents/Text.vue";
    
importIconfrom"@/customComponents/Icon.vue";
    
importImagefrom"@/customComponents/Image.vue";

constcomponents={

install:function(app){
    
app.component("Button",Button).component("Text",Text).component("Icon",Icon).component("Image",Image);

}
,
}
    ;
    
exportdefaultcomponents;
    

//main.js
importcomponentsfrom"@/customComponents";
    
app.use(components);
    

读到这里，这篇“vue3中如何通过遍历传入组件名称动态创建多个component组件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！