Vue.js<component> 标签未加载导入的组件； 使用组合 API

Question

我正在尝试使用带有<component>标记的动态组件制作一个简单的页面，该页面具有一些显示不同内容的选项卡。 我最近了解了 Composition API 并想尝试一下，但它给我带来了一些问题。

应用程序.vue：

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

<script setup>
import { ref, reactive } 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";

const dummyArr = [MainTab, ChartTab, FeedbackTab];

const activeTab = ref("main-tab");
const  allTabs =  [
         { name: "main", selected: true },
         { name: "chart", selected: false },
         { name: "feedback", selected: false }
       ];

function changeTab(selection) {
  let currTab = allTabs.findIndex((tab) => tab.selected === true),
    nextTab = allTabs.findIndex((tab) => tab.name === selection);
  allTabs[currTab].selected = false;
  allTabs[nextTab].selected = true;
  activeTab.value = `${selection}-tab`;
}
</script>

dummyArr只是为了防止编译器因为不使用MainTab或任何其他选项而对我大喊大叫。 此外， changeTab从allTabs返回导航栏选择的name

出于测试目的，每个导入的组件看起来都像这样：

<template>
  <h1> Main Tab </h1>
</template>

我的问题是，当我加载我的开发服务器时，标题（和内部导航栏）呈现正常，并且没有错误，但没有任何组件呈现到页面。 我一直在网上找到很多关于动态组件和打字稿的信息，但它们并没有为我的问题添加任何澄清。 （我也不使用打字稿，所以进一步混淆了事情......）

是什么导致我的组件无法动态加载到页面？

Answer 1

动态组件 应该是组件实例而不是字符串：

由于组件被引用为变量而不是在字符串键下注册，因此在<script setup>中使用动态组件时，我们应该使用动态:is绑定。

尝试将dummyArr转换为将组件名称作为键并将其实例作为值的对象components ：

 const components= {'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) {
  let currTab = allTabs.findIndex((tab) => tab.selected === true),
    nextTab = allTabs.findIndex((tab) => tab.name === selection);
  allTabs[currTab].selected = false;
  allTabs[nextTab].selected = true;
  activeTab.value = components[selection];//<-- get the component instance
}