Vue3动态添加组件到dom

Question

每当用户单击按钮时，我都会尝试将特定组件添加到 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，它也不会显示任何内容。

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

Answer 1

您的组件应该在 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"/>