如何在 Vue JS 中動態渲染組件？

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'}"/>