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

Question

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

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

Answer 1

创建一个显示所有 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

Answer 2

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

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

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

Vue create component in same component

javascript

vue.js

vue-component

vuejs2

vue-cli