解决Vue3组合式API模式下动态组件不渲染的问题

Vue3可以使用component组件渲染动态组件，将子组件名传递给:is指令就可以了。官方在文档中指出，传递到:is指令的值可以是：（1）被注册的组件名；（2）导入的组件对象。
假设有以下需求，有以下两个子组件，在父组件中需要根据其他条件动态加载：

<template>
  <h3>我是动态子组件A</h3>
</template>
<style scoped>
h3 {
  background-color: blue;
  color: #fff;
}
</style>

<template>
  <h3>我是动态子组件B</h3>
</template>
<style scoped>
h3 {
  background-color: blueviolet;
  color: #fff;
}
</style>

1. 将动态组件对象直接赋值给:is

在Vue3组合式API模式下，用component组件渲染动态组件，如果将动态组件对象直接赋值给:is指令是没有问题的。例如以下代码：
模板代码

<template>
  <div>
    <h3>组合API模式下动态组件的加载</h3>
    <component :is="CompA" />
    <component :is="CompB" />
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
</script>

TS代码

<script lang="ts" setup>
<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
</script>

</script>

效果如下，是没有问题的：

2. 通过动态组件名的方式赋值给：is，无法实现

假若需要根据不同情况赋予:is指令不同的子组件，那么就需要用一个变量来存子组件名称。在组合api模式下，子组件是无法渲染的。因为component组件的:is指令需要已注册的组件对象。请看如下代码：

<template>
  <div>
    <h3>组合API模式下使用动态组件名加载子组件</h3>
    <template v-for="comp in compArr" :key="comp.compName">
      <component :is="comp.compName" />
    </template>
  </div>
</template>

<script setup lang="ts">
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>

以上代码会引起错误提示：两个导入的子组件未使用：

而且在组合式API模式下，是不能显式注册子组件的，两个子组件也并没有按我们的预期渲染出来：

如何解决这个问题呢？

3. 使用组合式和选项式API结合的方式解决这个问题

在组合式API模式下，Vue是支持多个Script代码块的。由于选项式API可以显式注册导入的子组件，可以另外写一个选项式API模式的script来显式注册子组件。这样在component组件中，传入已注册子组件的名称即可。代码如下：

// 专门定义一个选项式api模块，来注册组件
<script lang="ts">
import { defineComponent } from "vue";
import CompA from "./CompA.vue";
import CompB from "./CompB.vue";
export default defineComponent({
  components: { CompA, CompB }
});
</script>

<script setup lang="ts">
const compArr = [{ compName: "CompA" }, { compName: "CompB" }];
</script>

两个子组件已经成功渲染了。