Vue 2.7组合式API动态绑定组件报错：Unknown custom element: <admin>

问题根源 #

你遇到的问题是因为Vue 2.7中<script setup>的局部组件注册机制导致的：

• 当你直接写<admin>、:is="'admin'"或is="admin"时，模板在编译阶段就能识别到局部注册的admin组件，直接关联渲染；
• 但用响应式ref('admin')绑定:is时，属于运行时动态解析，Vue会去全局组件列表中查找admin，而你的组件是局部注册的，所以找不到，抛出Unknown custom element错误。

两种修复方案 #

方案1：直接绑定组件对象（推荐） #

把响应式变量的值从字符串改成组件对象本身，这样运行时能直接拿到组件实例：

<script setup>
import Admin from './Admin.vue'; // 导入你的Admin组件
const renderTab = ref(Admin); // 直接存组件对象，不是字符串
</script>

<template>
  <component :is="renderTab"></component>
</template>

方案2：全局注册组件 #

如果需要用字符串名称动态切换，把admin组件注册到Vue全局：

// main.js
import Vue from 'vue';
import Admin from './Admin.vue';

Vue.component('admin', Admin); // 全局注册组件

之后就能正常用ref('admin')绑定:is了。

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