如何通过Data中的组件映射对象在模板中调用组件，规避多分支条件判断

你已经做了最关键的一步——创建组件映射对象，接下来只需要利用Vue的动态组件特性，就能彻底摆脱繁琐的if-else分支。

核心实现思路 #

Vue提供了内置的<component>标签，通过:is属性可以动态绑定你要渲染的组件。因为你的componentMap里已经直接存储了组件对象，所以直接通过键值取出对应的组件绑定给:is即可。

如果所有子组件都接收相同的Props，还可以用v-bind="$props"一次性把父组件的所有Props传递给动态渲染的子组件，省去逐个绑定的麻烦。

完整代码示例 #

Vue 2 选项式API

<template>
  <!-- 动态渲染对应组件，并传递所有Props -->
  <component 
    :is="componentMap[currentComponentKey]"
    v-bind="$props"
  ></component>
</template>

<script>
// 导入需要的组件
import TestComponent1 from './TestComponent1.vue'
import TestComponent2 from './TestComponent2.vue'

export default {
  // 定义所有子组件共享的Props
  props: ['commonProp1', 'commonProp2'],
  data() {
    return {
      // 当前要渲染的组件键值，可以根据业务逻辑动态修改
      currentComponentKey: 'testComponent1',
      // 你的组件映射对象
      componentMap: {
        "testComponent1": TestComponent1,
        "testComponent2": TestComponent2
      }
    }
  }
}
</script>

Vue 3 组合式API（<script setup>）

<template>
  <component 
    :is="componentMap[currentComponentKey]"
    v-bind="$props"
  ></component>
</template>

<script setup>
import { ref } from 'vue'
import TestComponent1 from './TestComponent1.vue'
import TestComponent2 from './TestComponent2.vue'

// 定义共享Props
const props = defineProps(['commonProp1', 'commonProp2'])
// 响应式存储当前组件键值
const currentComponentKey = ref('testComponent1')
// 组件映射对象
const componentMap = {
  "testComponent1": TestComponent1,
  "testComponent2": TestComponent2
}
</script>

额外说明 #

• 这种方式的扩展性极强：后续新增组件时，只需要在componentMap里添加新的键值对，完全不需要修改模板代码。
• 如果你后续需要给不同组件传递不同的Props，可以在绑定的时候做条件判断，比如v-bind="currentComponentKey === 'testComponent1' ? { propA: val } : { propB: val }"，不过你的场景里组件接收相同Props，用$props就足够了。

内容的提问来源于stack exchange，提问作者Eren Sönmez