Estoy tratando de hacer una página simple que tenga un puñado de pestañas que muestren contenido diferente, usando componentes dinámicos con la etiqueta <component> . Hace poco me enteré de la API de Composición y quería probarla, pero me está dando algunos problemas.
Aplicación.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 es simplemente para evitar que el compilador me grite por no usar MainTab o cualquiera de los otros. Además, changeTab devuelve el name de la selección de la barra de navegación de allTabs
Cada uno de los componentes importados se parece a esto, con fines de prueba:
<template> <h1> Main Tab </h1> </template>Mi problema es que cuando cargo mi servidor de desarrollo, el encabezado (y la barra de navegación interna) se muestran bien y no hay errores, pero ninguno de los componentes se muestra en la página. He estado encontrando mucha información en línea sobre componentes dinámicos y mecanografiados, pero no agregan ninguna aclaración a mi problema. (Tampoco uso texto mecanografiado, por lo que confunde aún más las cosas...)
¿Qué está causando que mis componentes no se carguen dinámicamente en la página?
El componente dinámico debe ser instancias de componentes, no cadenas :
Dado que se hace referencia a los componentes como variables en lugar de registrarlos bajo claves de cadena, deberíamos usar dynamic
:isvinculante cuando usamos componentes dinámicos dentro de<script setup>.
Intente convertir dummyArr en un components de objeto que tome el nombre del componente como clave y su instancia como valor:
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 }