Vue 3:每个按钮单击、生成新组件并在目标元素中追加为子元素
Vue 3:每个按钮单击、生成新组件并在目标元素中追加为子元素
提问于 2021-12-25 11:37:49
我一直在寻找一个简单的解决方案，以编程方式在Vue 3应用程序中生成组件。到目前为止，我已经使用defineComponent扩展div组件，并通过createApp和mount将其附加到主组件上。
主组件
<template>
<button type="button" v-on:click="addDiv"></button>
<div id="app-main">
</div>
</template>
<script>
import {defineComponent, createApp} from 'vue'
import Div from './components/Div.vue'
export default{
name: 'App',
methods: {
addDiv: () => {
let newDiv = defineComponent({extends: Div});
createApp(newDiv).mount("#app-main");
}
}
}
</script>分区组件：
<template>
<div>This is a div</div>
</template>
<script>
export default {
name: 'Div'
}
</script>我的问题是，mount替换了目标元素中的所有内容。如果单击该按钮3次，只会出现1次div，而不是3次。我需要一种方法，在该方法中，代码将组件作为目标元素中的子元素，允许我创建任意数量的div组件。提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-25 12:36:08
不要使用mount，因为这是为安装一个新的Vue实例而设计的。您想要使用的是<component :is="component_name">特性，并且可能有一个数组或其他数据结构，其中包含您希望呈现的组件列表。
例如，考虑以下简单示例：
Vue.component('my-component', {
// component config goes here, omitting for simplicity.
});
new Vue({
el: '#app',
data: {
elements: []
},
methods: {
addNewDiv() {
this.elements.push({type: 'my-component'});
}
}
});<div id="app">
<component v-for="element in elements" :is="element.type"></component>
</div>这将动态地迭代elements数组，并将用数组元素定义的任何内容替换<component>标记的每个实例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70479750
复制相关文章
相似问题
腾讯云开发者
