Question

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

但是我不能让它来渲染组件。

我尝试返回纯HTML，但不会渲染组件。

我从我的Home.vue模板调用表单生成器，我想要一个带有这样的选项对象的表单：

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
  }
}

Answer 1

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>

<强>更新

由于您无法控制组件，因此需要更多操作：

对于需要文本的每个组件，请在选项中添加文本属性：

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>

Answer 2

您可以遍历模板中的选项并检查选项类型：

<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>

Answer 3

您可以这样创建一个数组：

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

，然后在<component>内部遍历此数组：

<component
        v-for="(component,i) in components_data"
        :key="i"
        :is="component.name"
        :data="component.data"
    />

这将动态创建2个组件[<text>, <checkbox>]并通过道具为它们提供数据。

当您像这样components_data.push({name:'image',data: {url:'cat.jpg'}})推送新数据时，它将以<image :data="{url:'cat.jpg'}"/>的形式呈现新组件

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

3 个答案: