在setup语法糖中,按注册名动态渲染组件无效:
<template>
<component :is="cpnName" />
</template>
<script setup>
import QuesTypeContent from './QuesTypeContent.vue';
const cpnName = 'QuesTypeContent';
</script>
解决办法:
- 1.抛弃setup用选项式api。
- 2.如果我们必须要使用到组件名渲染时,做如下更改即可生效:
<template>
<component :is="cpn[cpnName]" />
</template>
<script setup>
import QuesTypeContent from './QuesTypeContent.vue';
const cpnName = 'QuesTypeContent';
const cpn = { QuesTypeContent };
</script>
本质上这还是直接使用组件对象,但解决了特定情况下必须用到组件注册名的问题。