首页 > 文章列表 > vue3中怎么通过遍历传入组件名称动态创建多个component组件

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

Vue3 component
465 2023-05-14

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

背景

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

<!--   直接创建  -->

<component :is="Image" />

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

<!-- 动态创建方式 1 -->

<div v-for="(comp, index) in realTimeComponent" :key="index">

    <component :is="comp" />

</div>



<!-- 动态创建方式 2-->

<component  v-for="(comp, index) in realTimeComponent" :key="index" :is="comp" />
<script setup>

import { ref } from "Vue";

import Image from "@/customComponents/Image.vue";

const realTimeComponent = ref(["Image"]);

</script>

或者

<script>

import { ref } from "Vue";

import Image from "@/customComponents/Image.vue";

export default {

        components: {

            Image,

        },

         setup(){

            const realTimeComponent = ref(["Image"]);

         }

}

</script>

展示效果如图:

解决

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

问题原因:

在遍历的时候,当前组件中导入并注册该组件无法识别,会认为没有注册该组件,从而展示<image></image>

但是,单独直接使用<component :is="Image" />该页面中注册该组件,是可以被识别的。

解决方案:

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

全局创建方法:

// src/customComponents/index.js

import Button from "@/customComponents/Button.vue";

import Text from "@/customComponents/Text.vue";

import Icon from "@/customComponents/Icon.vue";

import Image from "@/customComponents/Image.vue";

const components = {

    install: function (app) {

        app.component("Button", Button).component("Text", Text).component("Icon", Icon).component("Image", Image);

    },

};

export default components;



// main.js

import components from "@/customComponents";

app.use(components);