Vue动态组件:is传组件名字符串变量失效问题咨询

这本质是Vue动态组件:is属性的参数规则和示例代码结构共同导致的：

1. :is属性的有效值规则 #

Vue的<component :is>只接受两种类型的有效值：

• 组件构造函数对象：也就是你通过import导入的组件本身（比如import Home from './Home.vue'里的Home）
• 字符串类型的组件注册名：这个字符串必须是全局注册的组件名称（比如通过app.component('Home', Home)注册的），或者是当前组件的components选项（选项式API）中已注册的组件键名

2. 官方示例的代码结构限制 #

在官方提供的动态组件示例中，导入的组件（比如Home、Archive）并没有被注册为“可通过字符串名称查找”的组件：

• 如果是组合式API的<script setup>写法，导入的组件默认仅作为模板作用域内的变量存在，不会自动注册为以组件名为键的本地组件
• 如果是选项式API写法，示例里通常会把组件存放在data的tabs对象中，而非注册到components选项里

这时候，currentTab的字符串值（比如'Home'）并不是Vue能识别的“已注册组件名”，自然无法通过这个字符串找到对应的组件实例。

而tabs[currentTab]是直接获取到了组件构造函数对象，完全符合:is的参数要求；直接写Archive也是直接引用了组件对象，所以都能正常渲染。

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