Vue在同一个组件中创建组件答案

【问题标题】：Vue create component in same componentVue在同一个组件中创建组件
【发布时间】：2020-03-23 10:23:56
【问题描述】：

我有一个快速的问题，我找不到答案。我有问题。

我有一个组件 SelectForm.vue（它是一个带有按钮的表单），现在我想在这个 SelectForm.vue 组件中单击按钮，在它下面创建另一个 SelectForm。有可能吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-cli

【解决方案1】：

如果一个组件必须渲染自己，Vue 确实允许递归组件。

https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components

【讨论】：

【解决方案2】：

创建一个显示所有SelectForm 组件的包装器组件。当在第一个表单上单击按钮时，emit 一个事件，在包装器中监听它，并在那里创建一个新的。

Vue.component('Wrapper', {
    template: `<div>
        <SelectForm v-for="(form, index) in numForms" @new="numForms++" />
    </div>`,
    data() {
        return {
            numForms: 1
        }
    }
})

Vue.component('SelectForm', {
    template: `<div>
        The Form<br />
        <button @click="$emit('new')">Duplicate</button>
    </div>`
});

new Vue({
    el: "#app"
})

这是fiddle

【讨论】：