Vue中如何基于父组件传入的数组动态渲染多组件？

我明白你的需求啦——根据父组件传过来的form_type数组，在ChildTabs里动态渲染对应的表单组件对吧？Vue的动态组件功能正好能解决这个问题，咱们一步步来改：

首先，你的form_type数组里存的是组件名称的字符串（比如'Red'），而你已经导入了对应的组件文件，所以我们需要把这些字符串和实际的组件对象做一个映射，这样Vue才能准确找到要渲染的组件。你可以在组件的data里添加一个映射对象：

修改Tabs.vue的script部分：

<script>
'use strict';
import Red from './forms/red';
import Green from './forms/green';
import Blue from './forms/blue';

export default {
  name: 'forms-tab',
  data: function () {
    return {
      // 建立组件名称字符串与组件对象的映射
      componentMap: {
        Red,
        Green,
        Blue
      }
    }
  },
  props: {
    form_type: {
      type: Array,
      required: false,
      default: []
    },
  },
  components: {
    Red, 
    Blue, 
    Green
  }
}
</script>

接下来在Tabs.vue的template中，使用Vue内置的<component>标签配合:is属性，循环遍历form_type数组，就能动态渲染对应的组件了：

<template>
  <!--=============================================================-->
  <!-- Contact Forms -->
  <!--=============================================================-->
  <div class="tab-forms-container">
    <!-- 循环遍历form_type数组，渲染每个对应组件 -->
    <component 
      v-for="(formName, index) in form_type" 
      :key="index"
      :is="componentMap[formName]"
    />
  </div>
</template>

注意点： #

• 一定要给每个动态组件加上key属性，Vue需要它来跟踪组件的状态，避免出现渲染混乱的问题
• :is属性的值是我们映射对象里的组件实例，所以用componentMap[formName]来获取对应组件

看你的Contacts.vue代码，目前是把整个contact_types数组传给了ChildTabs的form_type prop，但根据你的描述，应该是选中某个contact类型（比如Big/Medium/Small）后，把该类型对应的form_type数组传过去对吧？你可以添加一个选择器来实现这个逻辑：

修改Contacts.vue的template：

<template>
  <div class="row">
    <!-- 添加选择器让用户选择联系人类型 -->
    <select v-model="selectedContactType" class="contact-type-select">
      <option 
        v-for="type in contact_types" 
        :key="type.value"
        :value="type"
      >
        {{ type.label }}
      </option>
    </select>
    <!-- 把选中类型对应的form_type数组传给子组件 -->
    <ChildTabs :form_type="selectedContactType?.form_type || []" />
  </div>
</template>

然后在Contacts.vue的data里添加选中状态的初始值：

data: function () {
  return {
    form_data: {},
    failed_validations: [],
    contact_type: '',
    contact_types: [
      { label: 'Big', value: 'big', form_type: [ 'Red' ] },
      { label: 'Medium', value: 'medium', form_type: [ 'Red', 'Green', 'Blue' ] },
      { label: 'Small', value: 'small', form_type: [ 'Blue', 'Green' ] },
    ],
    // 默认可以选中第一个类型，或者留空
    selectedContactType: this.contact_types[0]
  }
},

这样用户选择不同的联系人类型时，ChildTabs就会自动渲染对应的表单组件啦～

内容的提问来源于stack exchange，提问作者Suzed