Heim> Web-Frontend> View.js> Hauptteil

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

王林
Freigeben: 2023-05-11 19:52:04
nach vorne
2103 Leute haben es durchsucht

背景

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

 
Nach dem Login kopieren

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

 
Nach dem Login kopieren
 或者 
Nach dem Login kopieren

展示效果如图:

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);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonvue3中怎么通过遍历传入组件名称动态创建多个component组件. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn