如何在 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屋！