Vue.js Composition API下<component>标签无法加载导入组件问题

<script setup> 语法下，局部导入的组件不会自动和字符串名称做映射。你给 <component :is="activeTab"> 绑定的是 main-tab、chart-tab 这类字符串值，Vue 没法把这些字符串和你局部导入的 MainTab、ChartTab、FeedbackTab 组件关联起来。
当 :is 接收字符串值时，Vue 只会匹配两类目标：全局注册的组件、原生HTML标签。你写的几个标签页组件都是局部导入的，既没做全局注册，也不在原生标签列表里，Vue会把它们当成未知自定义元素静默跳过，自然不会渲染内容，也不会抛出报错。
你写的 dummyArr 只是为了绕开编译器的未使用变量校验，根本没有参与动态组件的匹配逻辑，没有实际作用。

两种实现方式，优先选第一种：

方案1：直接绑定组件对象，不传递字符串 #

显式建立标签名和组件引用的映射关系，切换标签时直接给activeTab赋值组件对象，不需要拼接字符串。
修改后的App.vue核心逻辑如下：

<template>
  <page-header :tabs="allTabs" @change-tab="changeTab"></page-header>
  <component :is="activeTab"></component>
</template>

<script setup>
import { ref } from "vue";
import PageHeader from "./components/PageHeader.vue";
import MainTab from "./components/views/MainTab.vue";
import ChartTab from "./components/views/ChartTab.vue";
import FeedbackTab from "./components/views/FeedbackTab.vue";

// 建立标签名到组件的映射，不需要再写dummyArr
const tabMap = {
  main: MainTab,
  chart: ChartTab,
  feedback: FeedbackTab
}

// 默认激活首页，直接绑定组件引用
const activeTab = ref(MainTab);
const allTabs =  [
  { name: "main", selected: true },
  { name: "chart", selected: false },
  { name: "feedback", selected: false }
];

function changeTab(selection) {
  const currTabIndex = allTabs.findIndex(tab => tab.selected);
  const nextTabIndex = allTabs.findIndex(tab => tab.name === selection);
  allTabs[currTabIndex].selected = false;
  allTabs[nextTabIndex].selected = true;
  // 从映射表取对应组件赋值
  activeTab.value = tabMap[selection];
}
</script>

这是<script setup>场景下动态组件的推荐写法，没有额外开销，支持tree-shaking，逻辑也清晰，顺便还能删掉原代码里未使用的reactive导入。

方案2：全局注册动态组件 #

如果你坚持要传字符串值做匹配，可以在应用入口把几个标签页组件注册为全局组件，Vue就能识别对应的字符串标签名了。
不推荐用这种方式，全局注册的组件无法被tree-shaking，会增加初始包体积，也不利于组件的作用域管理。
注册示例（入口文件main.js中添加）：

import { createApp } from 'vue'
import App from './App.vue'
import MainTab from "./components/views/MainTab.vue";
import ChartTab from "./components/views/ChartTab.vue";
import FeedbackTab from "./components/views/FeedbackTab.vue";

const app = createApp(App)
app.component('main-tab', MainTab)
app.component('chart-tab', ChartTab)
app.component('feedback-tab', FeedbackTab)
app.mount('#app')

注册完成后你原来写的字符串赋值逻辑就能正常运行。

补充：你之前搜的TypeScript相关方案不生效很正常，这个问题和TS完全无关，是<script setup>的编译特性决定的：<script setup>中的导入都属于模块作用域变量，只有在模板里直接写静态组件标签（比如<MainTab />）时，编译器才会在编译阶段自动把标签名和导入的组件做匹配；动态组件传字符串是运行时逻辑，走不到编译时的匹配流程，自然找不到局部导入的组件。

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