我正在制作一个表单生成器，该表单生成器将其中的组件用于输入字段，按钮等。我希望能够根据传递给它的选项生成表单。
但是我无法渲染组件。
我试图返回纯HTML，但不会渲染组件。
我从Home.vue模板调用表单生成器，在该模板中，我希望表单带有一个options对象：
options: {
name: {
type: 'input',
label: 'Name'
},
submit: {
type: 'button',
label: 'Send'
}
}
在模板中：
<template>
<form-generator :options="options"></form-generator>
</template>
在表单生成器组件中，我尝试了多种操作，例如：
<template>
{{ generateForm(this.options) }}
// ... or ...
<div v-html="generateForm(this.options)"></div>
</template>
我包括所有类似的组件：
import {
FormButton,
FormInput
} from './FormComponents'
现在最后一部分是如何制作FormInput渲染？
这不起作用，因为它直接输出HTML：
methods: {
generateForm(options) {
// .. do stuff with options ..
var form = '<form-input />'
return form
}
}
Vue有一种非常简单的方式来生成动态组件：
<component :is="dynamicComponentName"></component>
因此，我建议您将选项定义为数组并将类型设置为组件名称：
options: [
{
type: 'FormInput',
propsData: {label: 'Name'}
},
{
type: 'FormButton',
propsData: {label: 'Send'}
}
]
然后在表单生成器中使用它，如下所示：
<component :is="option.type" v-for="option in options"></component>
您还可以像传递给其他组件一样传递属性，但是由于它是动态的，并且每个组件都有一组不同的属性，因此我会将其作为对象传递，并且每个组件都可以访问所需的数据：
<component :is="option.type" v-for="option in options" :data="option.propsData"></component>
更新
由于您无法控制组件，因此需要更多操作：
对于每个需要文本的组件，在选项中添加一个text属性：
options: [
{
type: 'FormInput',
propsData: {label: 'Name'}
},
{
type: 'FormButton',
text: 'Send',
propsData: {label: 'Send'}
}
]
然后在组件中使用它：
<component :is="option.type" v-for="option in options">{{option.text}}</component>
对于传递属性，我认为您可以使用v-bind传递它，然后它将自动解构它们，因此，如果一个按钮接受2个道具：rounded, color选项如下所示：
{
type: 'FormButton',
text: 'Button',
propsData: {rounded: true, color: '#bada55'}
}
然后是组件：
<component :is="option.type" v-for="option in options" v-bind="option.propsData">{{option.text}}</component>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句