Vue3 Composition API中<component :is>动态组件渲染失败问题

Vue3 使用 <script setup> 语法时，模板编译作用域和脚本内的变量作用域直接绑定，不会像Vue2 Options API那样自动将导入的组件按组件名做字符串映射匹配。
当你给:is传入接口返回的普通字符串值（比如"selectinput"/"SelectInput"）时，Vue找不到该字符串对应的组件对象引用，就会把它当做原生自定义HTML标签渲染，最终就出现了你看到的<selectinput>空标签，不会加载本地导入的自定义组件。
而你硬编码绑定导入的SelectInput组件变量时，传入的是实际的组件对象，因此可以正常渲染。

手动维护一个「组件类型标识 -> 组件对象」的映射表，动态渲染时根据接口返回的type值从映射表中取出对应的组件对象，传给:is即可。
修改后的完整代码如下：

<template>
    <div class="item-group section-wrap">
        <div :key="question.guid" class='component-wrap'>
            <div class="component-container">
                <component :is="componentMap[question.type]" :propData="question" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue';
import SelectInput from "./SelectInput";
import TextareaInput from "./TextareaInput";

// 组件映射表，key必须和接口返回的question.type值完全一致
const componentMap = {
    SelectInput,
    TextareaInput
    // 后续新增动态组件，在此处补充对应映射即可
}

const props = defineProps({
    question: Object,
});

const { question } = toRefs(props);
</script>

• 映射表的key必须和接口返回的question.type值完全匹配：如果接口返回的是小写selectinput，映射表就要写成selectinput: SelectInput；如果返回的是短横线命名select-input，key就对应写select-input
• 该方案是局部注册映射，支持tree-shaking，不会引入冗余代码，比全局注册组件更适合构建工具的生产环境优化
• <script setup>模式下，不要直接给:is传未做映射的纯字符串，这类值只会被识别为原生HTML标签名，不会匹配到你导入的本地组件

内容的提问来源于stack exchange，提问作者Bryan88