vue.js＆lt;组件＆gt;标签不加载导入的组件；使用构图API

Question

我正在尝试制作一个具有少数选项卡的简单页面，这些选项卡使用＆lt;组件＆gt; tag的动态组件。我最近了解了构图API，并想尝试一下，但这给了我一些问题。

app.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仅仅是为了防止编译器不使用Mainterab或其他任何一个。另外，changetab从alltabs 返回navbar选择的名称

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

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

我的问题是，当我加载Dev服务器时，标头（和内部NAV栏）呈现良好，没有错误，但是没有任何组件呈现到页面上。我一直在网上找到有关动态组件和打字稿的大量信息，但它们并没有为我的问题添加任何澄清。 （我也不使用Typescript，因此进一步混淆了事物...）

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

Answer 1

动态组件应该是组件实例：

由于组件被称为变量，而不是在字符串键下注册，因此我们应该使用Dynamic ：IS在使用＆lt; script; script＆gt;。。。。 P>

尝试将dummyarr转换为对象组件，该将组件名称作为键及其实例作为值：

 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
}