vue3 setup语法糖要引多个子组件，并且根据条件渲染

Vue3 的 `setup` 函数是一个新的生命周期钩子，它提供了一种简洁的方式来组织组件内部的状态和计算。如果你想在 `setup` 中引入并根据条件渲染多个子组件，你可以这样做：

import { ref, onMounted } from 'vue';

// 定义一个对象来存储子组件和对应的显示状态
const components = {
  childComponentA: ref(null),
  childComponentB: ref(null),
};

// 初始化函数，在挂载时设置初始状态
onMounted(() => {
  // 根据条件判断显示哪个子组件
  if (yourCondition) {
    components.childComponentA.value = YourComponentA();
  } else {
    components.childComponentB.value = YourComponentB();
  }
});

// 在模板中，使用 v-if 或者动态组件绑定来展示子组件
<template>
  <div>
    <YourComponentA v-if="components.childComponentA" :is-child-a="true" />
    <YourComponentB v-if="components.childComponentB" :is-child-b="true" />
  </div>
</template>

<script setup>
export default {
  props: {
    isChildA: Boolean, // 如果有 prop 来控制子组件显示，可以使用这个
  },
};
</script>