我试图在用户单击按钮时将特定组件添加到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，它也不会显示任何内容。
谁能告诉我可能是什么问题？以及什么是可以归档我想要做的工作方法？
您的组件应该在componentsoption中全局或本地注册，而react组件应将对象作为参数，或者应使用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"/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句