Maison> interface Web> Voir.js> le corps du texte

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

王林
Libérer: 2023-05-11 19:52:04
avant
2103 Les gens l'ont consulté

背景

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

 
Copier après la connexion

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

 
Copier après la connexion
 或者 
Copier après la connexion

展示效果如图:

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);
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn