从数组动态渲染多个组件 [英] Rendering multiple components dynamically from an array
问题描述
我正在尝试在名为 ChildTabs 的子组件中动态呈现组件.我想根据从名为 Contatcs 的父视图传递到组件的数组来呈现组件.
例如，如果我从名为Big"的 contact_type 传递 form_type，它将呈现在我的标签 vue 上.但是，我还有其他数据包含多个我正在尝试渲染的组件，例如包含多种形式的媒体，例如 Red Green &蓝色.
我有一个想法，使用 prop 数据 form_type 在我的方法中创建一个 for 循环，这样我就可以检索我试图调用的表单列表，但那是我不知道下一步该做什么的地方.我已经在导入表单，但不知道如何呈现它们.
欢迎提出任何建议.
Contacts.vue
<div class="row"><子标签:form_type="contact_types"/></模板><脚本>'使用严格';从'../tabs'导入ChildTabs；导出默认{name: '联系人视图',数据:函数(){返回 {表单数据:{}，failed_validations: [],contact_type: '',联系类型:[{标签:'大',价值:'大'，表单类型:['红色的']},{标签:'中',价值:中等"，表单类型:['红色的'，'绿'，'蓝色']},{标签:'小',价值:'小'，表单类型:['蓝色'，'绿']},],}},道具: {},计算:{},方法: {},成分: {子标签}}
Tabs.vue
<!--==============================================================--><!-- 联系表格--><!--==============================================================--></模板><脚本>'使用严格';从 './forms/red' 导入红色；从./forms/green"导入绿色；从'./forms/blue'导入蓝色；导出默认{name: '表格标签',数据:函数(){返回 {}},道具: {表单类型:{类型:数组，要求:假，默认: []},},计算:{},方法: {RenderComponent: 函数 (){this.$props.form_type}},创建:函数(){this.RenderComponent();},成分: {红色的，蓝色，绿}}你可以使用 Vue 中的动态组件
<div><div v-for="type in form_type" :key="type"><component :is="getCompentName(type)"/></模板><脚本>导出默认{...方法: {getCompentName(类型){开关(类型){案例红色":返回红色"案例蓝色":返回蓝色"案例绿色":返回绿色"默认:返回红色"}}}}
I am trying to render components dynamically within my child component named ChildTabs. I would like to render the components based on the array that passed into the component from the parent view named Contatcs.
So for example if I pass the the form_type from the contact_type named "Big" it would render on my tabs vue. However I have other data that contains more than one component I am trying to render, such as medium which contains multiple forms such as Red Green & Blue.
I have an idea of creating a for loop in my method using the prop data form_type, so I can retrieve my list of forms I am trying to call, but that is where I do not know what to do next. I am already importing the forms, I am not sure how to render them.
Any suggestions are welcomed.
Contacts.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.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>
You can use dynamic component in Vue
<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>
这篇关于从数组动态渲染多个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
