如何在 Vue JS 中动态渲染组件? [英] How to render components dynamically in Vue JS?
问题描述
我正在制作一个表单生成器,其中的组件用于输入字段、按钮等.我希望能够根据传递给它的选项生成表单.
I am making a form generator, which uses components in it for input fields, buttons etc. I want to be able to generate the form depending on what options I pass to it.
但我无法让它渲染组件.
But I can't get it to render the components.
我尝试返回纯 HTML,但这不会呈现组件.
I tried to return pure HTML but that won't render the components.
我从我的 Home.vue 模板调用表单生成器,我希望表单带有这样的选项对象:
I call the form generator from my Home.vue template where I want the form with an options object like this:
options: {
name: {
type: 'input',
label: 'Name'
},
submit: {
type: 'button',
label: 'Send'
}
}
在模板中:
<template>
<form-generator :options="options"></form-generator>
</template>
在表单生成器组件中,我尝试了多种方法,例如:
In the form generator component I have tried multiple things like:
<template>
{{ generateForm(this.options) }}
// ... or ...
<div v-html="generateForm(this.options)"></div>
</template>
我包含了所有组件,例如:
I include all the components like:
import {
FormButton,
FormInput
} from './FormComponents'
现在最后一部分是如何让 FormInput
呈现?
Now the final part is how do I make FormInput
render?
这不起作用,因为它按字面输出 HTML:
This does not work since it outputs the HTML literally:
methods: {
generateForm(options) {
// .. do stuff with options ..
var form = '<form-input />'
return form
}
}
推荐答案
Vue 有一个非常简单的方法来生成动态组件:
Vue has a very simple way of generating dynamic components:
<component :is="dynamicComponentName"></component>
所以我建议你将选项定义为一个数组并将类型设置为组件名称:
So I suggest you define the options as an array and set the type to be the component name:
options: [
{
type: 'FormInput',
propsData: {label: 'Name'}
},
{
type: 'FormButton',
propsData: {label: 'Send'}
}
]
然后像这样在表单生成器中使用它:
Then use it in the form generator like this:
<component :is="option.type" v-for="option in options"></component>
您也可以像传递给 ant 其他组件一样传递属性,但由于它是动态的,并且每个组件都有一组不同的属性,我会将其作为对象传递,并且每个组件都将访问它需要的数据:>
You can also pass properties as you'd pass to ant other component, but since it's dynamic and every component has a different set of properties i would pass it as an object and each component would access the data it needs:
<component :is="option.type" v-for="option in options" :data="option.propsData"></component>
更新
由于您无法控制组件,因此需要进行更多操作:
Since you don't have control of the components it requires a bit more manipulation:
对于每个需要文本的组件,在选项中添加一个文本属性:
For each component that requires text, add a text attribute in the options:
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
选项如下:
For passing attributes, I think you can pass it using v-bind and then it will automatically destructure them, so if a button accepts 2 props: rounded, color
the options would look like:
{
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>
这篇关于如何在 Vue JS 中动态渲染组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!