javascript - 循环 Vue 组件数组

Question

我正在尝试根据要显示的不同 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>

但这显然行不通:/。有什么建议吗？

解决方案

这是我解决这个问题的方法；

// 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': {
     ...
    },
  };
},

Answer 1

使用dynamic components .

const sections = ['summary-section', 'score-section'];

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

但是，section 应该只保存已注册组件的名称。