我正在嘗試制作一個簡單的頁面，其中包含一些顯示不同內容的選項卡，使用帶有<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回傳name導航欄選擇的allTabs
出于測驗目的，每個匯入的組件看起來都像這樣：
<template>
<h1> Main Tab </h1>
</template>
我的問題是，當我加載我的開發服務器時，標題（和內部導航欄）呈現正常，并且沒有錯誤，但沒有任何組件呈現到頁面。我一直在網上找到很多關于動態組件和打字稿的資訊，但它們并沒有為我的問題添加任何說明。（我也不使用打字稿，所以進一步混淆了事情......）
是什么導致我的組件無法動態加載到頁面？
uj5u.com熱心網友回復：
動態組件應該是組件實體而不是字串：
由于組件是作為變數參考的，而不是在字串鍵下注冊的，所以我們
:is在內部使用動態組件時應該使用動態系結<script setup>。
嘗試將 轉換為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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/487846.html
標籤：javascript Vue.js Vue组件 Vuejs3 vue-composition-api
上一篇：處理草圖不會在瀏覽器中加載