Javascript 如何在Vue JS中动态呈现组件？

我正在制作一个表单生成器，它使用其中的组件作为输入字段、按钮等。我希望能够根据传递给表单的选项生成表单

但我无法让它渲染组件

我试图返回纯HTML，但无法呈现组件

我从my Home.vue模板调用表单生成器，希望表单具有如下选项对象：

options: {
    name: {
        type: 'input',
        label: 'Name'
    },
    submit: {
        type: 'button',
        label: 'Send'
    }
}

<component :is="option.type" v-for="option in options"></component>

components_data: [
            {
                name: 'checkbox',
                data: false
            },
            {
                name: 'text',
                data: 'Hello world!'
            }
        ]

在模板中：

<template>
  <form-generator :options="options"></form-generator>
</template>

现在，最后一部分是如何使

FormInput

render

这不起作用，因为它按字面形式输出HTML：

methods: {
  generateForm(options) {

    // .. do stuff with options ..
    var form = '<form-input />'

    return form
  }
}

方法：{
generateForm（选项）{
//…做一些有选择的事情。。
变量形式=“”
报税表
}
}

您可以迭代模板中的选项并检查选项类型：

<template>
  <div v-for="option in options">
    <form-input v-if="option.type === 'input'"></form-input>
    <form-button v-else-if="option.type === 'button'"></form-button>
  </div>
</template>

---

Vue有一种生成动态组件的非常简单的方法：

<component :is="dynamicComponentName"></component>

然后在表单生成器中使用它，如下所示：

options: {
    name: {
        type: 'input',
        label: 'Name'
    },
    submit: {
        type: 'button',
        label: 'Send'
    }
}

<component :is="option.type" v-for="option in options"></component>

components_data: [
            {
                name: 'checkbox',
                data: false
            },
            {
                name: 'text',
                data: 'Hello world!'
            }
        ]

然后在组件中使用它：

<component :is="option.type" v-for="option in options">{{option.text}}</component>

<component :is="option.type" v-for="option in options" v-bind="option.propsData">{{option.text}}</component>

然后是组件：

<component :is="option.type" v-for="option in options">{{option.text}}</component>

<component :is="option.type" v-for="option in options" v-bind="option.propsData">{{option.text}}</component>

{{option.text}

您可以创建如下数组：

options: {
    name: {
        type: 'input',
        label: 'Name'
    },
    submit: {
        type: 'button',
        label: 'Send'
    }
}

<component :is="option.type" v-for="option in options"></component>

components_data: [
            {
                name: 'checkbox',
                data: false
            },
            {
                name: 'text',
                data: 'Hello world!'
            }
        ]

然后在

中循环此数组：

这将动态创建两个组件

[，]

，并通过道具为它们提供数据

---

当你像这样推送新数据时，

组件\u data.push（{name:'image'，data:{url:'cat.jpg'}}}）

它会将一个新组件呈现为

我不想这样做，因为我无法控制组件的显示顺序。我想你可以复制选项数组并按你的意愿对其排序，然后在模板中使用排序选项。如果我直接控制组件，这可能会起作用。我使用的是类星体框架atm。对于按钮，您需要在文本之间放置文本，如图所示：。。。此外，它还可以接受一些自定义属性，如“round”等。使用您的示例意味着我需要包装框架的每个组件，这取决于它们需要什么作为输入。在这个用例中有更简单的方法吗？更新了答案谢谢，这似乎很有效。最后一个问题，您如何传递诸如“@click”和“v-bind”之类的内容？只需在选项中添加一个click函数，并在组件上设置它，如：

@click=“options.onClick”

我尝试过，但它给了我：“click事件处理程序中的错误”：“TypeError:fns.apply不是函数”。我创建了一个名为“submitForm”的方法并在options.onClick：“submitForm”中传递