vue3中通过遍历传入组件名称动态创建多个component 组件
作者：蓓蕾心晴
这篇文章主要介绍了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);问题解决！
到此这篇关于vue3中通过遍历传入组件名称动态创建多个component 组件的文章就介绍到这了,更多相关vue3动态创建多个component 组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！