是否将基于条件的不同子项添加到动态Vue组件中？

<template>
  <div>
    <!-- 使用v-if/v-else-if/v-else -->
    <component-a v-if="condition === 'A'"></component-a>
    <component-b v-else-if="condition === 'B'"></component-b>
    <component-c v-else></component-c>

    <!-- 使用计算属性 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  },
  setup() {
    const condition = ref('A');

    const currentComponent = computed(() => {
      switch (condition.value) {
        case 'A':
          return 'ComponentA';
        case 'B':
          return 'ComponentB';
        default:
          return 'ComponentC';
      }
    });

    return {
      condition,
      currentComponent
    };
  }
};
</script>