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

Posted 2023-02-19

【中文标题】Vue.js 如何渲染动态组件？

【英文标题】：Vue.js how to render dynamic component?

【发布时间】：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>

【参考方案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。