Vue.js 从阵列动态渲染多个组件

我正在尝试在名为ChildTabs的子组件中动态呈现组件。我想根据从名为Contatcs的父视图传入组件的数组来渲染组件

例如，如果我从名为“Big”的联系人类型传递表单类型，它将在我的选项卡vue上呈现。但是，我有其他数据包含我尝试渲染的不止一个组件，例如包含多种形式的介质，如红、绿和蓝

我有一个想法，就是在我的方法中使用prop data form_类型创建一个for循环，这样我就可以检索我试图调用的表单列表，但我不知道接下来要做什么。我已经在导入表单，我不知道如何呈现它们

欢迎提出任何建议

联系人.vue

<template>
    <div class="row">
          <ChildTabs
                :form_type="contact_types"
            />
    </div>
</template>


<script>
  'use strict';

  import ChildTabs from '../tabs';

  export default {
    name: 'contacts-view',
    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'
                    ]
                },
            ],
        }
    },

    props: {

    },

    computed: {

    },

    methods: {
    },

    components: {
        ChildTabs
    }
}
</script>

"严格使用",；
从“../tabs”导入子选项卡；
导出默认值{
名称：“联系人视图”，
数据：函数（）{
返回{
表单_数据：{}，
失败的\u验证：[]，
联系人类型：''，
联系方式：[
{
标签：“大”，
值：“大”，
表格类型：[
“红色”
]
},
{
标签：'中等'，
值：'中等'，
表格类型：[
“红色”，
“绿色”，
“蓝色”
]
},
{
标签：“小”，
值：“小”，
表格类型：[
“蓝色”，
“绿色”
]
},
],
}
},
道具：{
},
计算：{
},
方法：{
},
组成部分：{
儿童标签
}
}

Tabs.vue

<template>
  <!--=============================================================-->
  <!-- Contact Forms -->
  <!--=============================================================-->
</template>

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

    props: {
        form_type: {
            type: Array,
            required: false,
            default: []
        },
    },

    computed: {

    },

    methods: {
        RenderComponent: function ()
        {
            this.$props.form_type
        }
    },

    created: function () {
      this.RenderComponent();
    },

    components: {
      Red,
      Blue,
      Green
    }
  }
</script>

"严格使用",；
从“./forms/Red”导入红色；
从“./forms/Green”导入绿色；
从“./forms/Blue”导入蓝色；
导出默认值{
名称：“表单选项卡”，
数据：函数（）{
返回{
}
},
道具：{
表格类型：{
类型：数组，
必填项：false，
默认值：[]
},
},
计算：{
},
方法：{
RenderComponent:函数（）
{
此.$props.form_类型
}
},
已创建：函数（）{
this.RenderComponent（）；
},
组成部分：{
红色
蓝色
绿色
}
}

您可以在Vue中使用

导出默认值{
...
方法：{
getCompentName（类型）{
开关（类型）{
案例“红色”：
返回“红色”
“蓝色”案例：
返回“蓝色”
“绿色”案例：
返回“绿色”
违约：
返回“红色”
}
}
}
}

<template>
  <div>
    <div v-for="type in form_type" :key="type">
      <component :is="getCompentName(type)"/>
    </div>

  </div>
</template>

<script>
  export default {
    ...
    methods: {
      getCompentName(type) {
        switch (type) {
          case 'red':
            return 'red'
          case 'blue':
            return 'blue'
          case 'green':
            return 'green'
          default:
            return 'red'
        }
      }
    }
  }
</script>