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"/>

Vue3 动态添加组件到 dom

Vue3 add component to dom dynamically

vue.js

vue-component

vuejs3