宜宾网站建设公司

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

本文小编为大家详细介绍“vue3中如何通过遍历传入组件名称动态创建多个component组件”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3中如何通过遍历传入组件名称动态创建多个component组件”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序设计，10年建站对搬家公司等多个行业，拥有多年的营销推广经验。

背景

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

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



    


import { ref } from "Vue";
import Image from "@/customComponents/Image.vue";
const realTimeComponent = ref(["Image"]);

或者

展示效果如图：

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

解决

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

问题原因：

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

使用 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);

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


网站标题：vue3中如何通过遍历传入组件名称动态创建多个component组件
网站地址：http://ybzwz.com/article/jedgoe.html

其他资讯