Vue.js 如何渲染动态组件？答案

【问题标题】：Vue.js how to render dynamic component?Vue.js 如何渲染动态组件？
【发布时间】：2021-12-28 13:33:50
【问题描述】：

我正在使用Vue3 构建一个laravel 项目。主要概念是我从后端生成输入属性，我想在 Vue 中渲染这些属性。现在我有 2 个组件。 FormComponent 包含基本的form 标记、submit button、表单标题等...第二个是包含基本<input> 标记的BaseInputComponent。将来会有更多options、checkboxes 等的组件... 用FormComponent 绑定来渲染这些输入组件的最佳方法是什么。首先，我使用来自php 的属性构建html 字符串，如下所示：'<base-input-component label="xyz"></base-input-component>'，但我无法从vue 呈现它。另一种可能的方法是我在 FormComponent 中使用switch-case 并插入正确的输入、选项、复选框组件。我想在FormComponent 处理提交。代码还不完整，首先我想渲染这些组件，我想达到它们的值。什么是最好的解决方案？

//This will be the first option json that comes from the backend, but i cant render these out from string.
{
  zip_code: '<base-input-component name="zip_code" label="Zip code"></base-input-component>',
  city: '<base-input-component name="city" label="City"></base-input-component>'
}


//This will be the second option json that comes from the backend
{
  zip_code: {
    name: 'zip_code',
    label: 'Zip code'
    placeholder: 'sadas',
    validation_rules: 'required|string',
    type: 'text'
  },
  city: {
    name: 'city',
    label: 'City'
    placeholder: 'sadas',
    validation_rules: 'required|string',
    type: 'text'
  }
}

BaseInputComponent:

<script>
    export default {
        name: "BaseInputComponent",
        props: {
            label: {
                type: String,
                default: ''
            },
            modelValue: {
                type: [String, Number],
                default: ''
            }
        },
    }
</script>

<template>
    <div class="w-full md:w-1/2 p-3">
        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
            {{ label }}
        </label>
        <input :value="modelValue"
               @input="$emit('update:modelValue', $event.target.value)"
               class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
    </div>
</template>

【问题讨论】：

标签： vue.js dynamic components vuejs3 builder

【解决方案1】：

如果我确实清楚地了解了您的问题，我认为您需要的是v-for。见Vue3 Documentation: List Rendering

您不需要像选项 1 那样从后端发送整个 HTML 文本，因为这是不必要的，选项 1 将涉及到 javaScript 中的 Element.appendChild() 或 Vue 模板中的 v-html（不安全）。

您可以简单地使用选项 2 数据，假设当前您只有 name 和 label，它们应该是数组中的对象：

data = [
  zip_code: {
    name: 'zip_code',
    label: 'Zip code'
  },
  city: {
    name: 'city',
    label: 'City'
  }
]

然后在您的模板中使用v-for：

<template>
  <div>
    <base-input-component
      v-for="(item, index) in data"
      :key="index"
      :name="item.name"
      :label="item.label"
    />
  </div>
</template>

等于：

<template>
  <div>
    <base-input-component
      name="zip_code"
      label="Zip code"
    />
    <base-input-component
      name="city"
      label="City"
    />
  </div>
</template>

这应该呈现你想要的所有动态base-input-component。

【讨论】：