时间戳

首页 > 解决方案 > Vue3动态添加组件到dom

vue.js - Vue3动态添加组件到dom

问题描述

每当用户单击按钮时，我都会尝试将特定组件添加到 DOM 元素。我在 dom 中显示组件的代码：

<component v-for="(component, index) in components" :key="index" :is="component"></component>

我正在使用带有组合的 Vue3。

const components = reactive([]);
components[0] = 'TemplateText';
components[1] = 'TemplateText';

我希望这个组件现在将在我的 DOM 中加载两次。当我检查我的源代码时，该组件存在两次，即：

<templatetext data-v-997532dc=""></templatetext>
<templatetext data-v-947231dc=""></templatetext>

但即使组件中确实包含 tekst，它也不会显示任何内容。

谁能告诉我可能出了什么问题？什么是归档我想做的工作方法？

标签： vue.jsvue-componentvuejs3

解决方案

您的组件应该在components选项中全局或本地注册，并且反应应该将对象作为参数，或者您应该使用 ref 代替：

components:{
TemplateText
},
setup(props){
const state= reactive({components:[]});
state.components[0] = 'TemplateText';
state.components[1] = 'TemplateText';

return {state}
}

模板 ：

<component v-for="(component, index) in state.components" :key="index" :is="component"></component>

如果你只想多次渲染你的组件，只需循环一个数字而不使用反应性的东西：

<TemplateText v-for="index in 2" :key="index"/>

推荐阅读