Componentes compuestos con contexto
Cree componentes multiparte que compartan el estado mediante el contexto.
Componentes compuestos con contexto es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Componentes compuestos
Un componente compuesto es una única interfaz lógica dividida en varios subcomponentes coordinados (Tabs + Tab + TabPanel).
Estado compartido mediante Context
El componente padre establece el estado compartido en el contexto; los hijos lo leen mediante getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });El hijo lee el contexto
Cada Tab y TabPanel obtiene la API compartida.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Acoplamiento débil
Los hijos no hacen referencia directa al padre; se comunican mediante el contexto.
API componible
Quienes consumen el componente pueden reorganizar y personalizar los subcomponentes libremente.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>Ejemplos
Tabs, Accordion, Menu, Listbox, Steps.
Convención de nomenclatura
Utilice un prefijo compartido o exportaciones con espacio de nombres para mayor claridad.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Contexto con seguridad de tipos
Defina una clave de tipo symbol y un tipo para la API compartida.
Errores por uso incorrecto
Si un hijo no puede encontrar el contexto, lance un error claro que oriente a quienes consumen el componente.
Reutilización
Los componentes compuestos son muy reutilizables porque quienes los consumen controlan su composición.
Combinación con builders
Los componentes compuestos suelen utilizar internamente el patrón Builder para ofrecer accesibilidad headless.
Comprobación rápida
¿Cómo comparten el estado los componentes compuestos?
Recapitulación
Los componentes compuestos dividen una interfaz en subcomponentes componibles que se coordinan mediante el contexto.
Preguntas frecuentes
¿La lección «Componentes compuestos con contexto» es gratis?
Sí — el texto completo de «Componentes compuestos con contexto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes compuestos con contexto»?
Cree componentes multiparte que compartan el estado mediante el contexto. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Componentes compuestos con contexto»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Render props con snippets
- Componentes de orden superior
- El patrón Builder para interfaces headless
- Componentes compuestos con contexto