Javascript Vue组件的循环阵列

我正试图根据要显示的不同UI部分的配置文件生成Vue组件数组

const config = [
  'summarySection',
  'scoreSection',
  'educationSection'
]

因此，我试图将其映射到一系列vue组件中，以便在模板中使用。我在考虑做这样的事情

const availableComponents = {
  'summarySection': <summary-section/ >,
  'scoreSection': <score-section/>,
  ...
}

const sections = config.map((section) => availableComponents[section])

<template v-for="section in sections">
  {{ section }}
</template>

const availableComponents={
“摘要部分”：，
“记分部分”：，
...
}
const sections=config.map（（section）=>availableComponents[section]）
{{section}}

但这显然不起作用：/。有什么建议吗

解决方案

下面是我如何解决这个问题的

// In my config file;
const sections = [
  'profile-summary-section',
  'matchbars-section',
  'job-experience-section',
  'education-section',
  'skills-section',
  'about-section',
  'availability-section',
  'recruiter-notes-section',
  'transport-section',
]

// In my template;
<template v-for="section in sections">
  <component :is="section" :key="section" v-bind="sectionProps[section]"></component>
</template>

// In my computed variables;
sectionProps() {
  return {
    'profile-summary-section': {
      vIf: this.showSummary,
      class: 'mb-2 has-light-border bg-white',
      profile: this.profile,
      number: 0,
      showMatchPercentage: false,
    },
    'matchbars-section': {
     ...
    },
  };
},

//在我的配置文件中；
常数段=[
“概要文件摘要部分”，
“火柴条部分”，
‘工作经验组’，
"教育组",，
"技能组",，
“关于部分”，
“可用性部分”，
“招聘人员说明部分”，
"运输组",，
]
//在我的模板中；
//在我的计算变量中；
部分道具（）{
返回{
“概要文件摘要部分”：{
vIf：这是我的总结，
类别：“mb-2具有浅边框背景白色”，
profile:this.profile，
编号:0，
showMatchPercentage:false，
},
“火柴条部分”：{
...
},
};
},

使用

const sections=['summary-section'，'score section']；

但是，

部分应该只保留注册组件的名称。
使用

const sections=['summary-section'，'score section']；

但是，
节应只保留已注册组件的名称。
数组节应是Vue组件数据的一部分，以便您可以在v-for中访问它。还要注意，对数组的操作也应该在Vue实例的特殊方法中完成。
数组部分应该是Vue组件数据的一部分，以便您可以在v-for中访问它。还请注意，对数组的操作也应该在Vue实例的特殊方法中完成。
请参见如何为每个组件添加自定义道具？使用v-bind指令。如何为每个组件添加自定义道具？使用v-bind指令。
const sections = ['summary-section', 'score-section'];

<template v-for="section in sections">
  <component :is="section"></component>
</template>