如何解决Vue3组合式API模式下动态组件不渲染问题
作者：cppandtea
这篇文章主要介绍了如何解决Vue3组合式API模式下动态组件不渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教<BR>
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>
两个子组件已经成功渲染了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。