Vue 3：每个按钮单击，生成新组件并作为子元素追加到目标元素中

Question

我一直在寻找一种简单的解决方案来以编程方式在 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>

Div分量：

<template>
 <div>This is a div</div>
</template>

<script>
 export default {
  name: 'Div'
 }
</script>

我的问题是 mount 替换了目标元素中的所有内容。如果您单击该按钮 3 次，则只会出现 1 个 div 而不是 3 个。我需要一种方法，其中代码将组件作为子元素附加到目标元素中，从而允许我创建尽可能多的 div 组件我想。提前致谢！

Answer 1

不要使用 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> 标记的每个实例替换为数组元素定义的任何内容。

Vue 3：每个按钮单击，生成新组件并作为子元素追加到目标元素中

Vue 3: Each button click, generate new component and append as child in the target element

vue.js

vue-component