Slots con nombre mediante slot="name"
Defina varios puntos de inserción en un componente utilizando slots con nombre
Slots con nombre mediante slot="name" es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 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.
Por qué usar slots con nombre
A menudo, los componentes necesitan varios puntos de inserción: por ejemplo, un encabezado, un cuerpo y un pie.
Definición de slots con nombre
Añada un atributo name al elemento slot del hijo.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>Rellenar slots con nombre
Desde el padre, marque los elementos con un atributo slot="name".
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>Combinar slots predeterminados y con nombre
El contenido sin atributo slot rellena el slot predeterminado. El contenido con nombre se dirige a su slot correspondiente.
Independencia del orden
El orden en el padre no importa. Cada slot se empareja por su nombre.
Varios elementos por slot
Envuelva varios elementos en un único elemento contenedor con el atributo slot para enviarlos todos al mismo slot.
Encabezados condicionales
Use {#if} en el padre para rellenar slots con nombre de forma opcional.
Diseños habituales
Este patrón es ideal para diseños con encabezado, barra lateral, contenido principal y pie.
Componentes de formulario
Los componentes de formulario pueden definir slots para prefijos, sufijos, texto de ayuda, etc.
Autodocumentación
Los nombres de los slots describen la API del componente. Elija nombres descriptivos como title o actions.
Ayudantes de TypeScript
Puede tipar los slots con un genérico especial $$Slots en archivos Svelte de TypeScript.
Comprobación rápida
¿Cómo se selecciona un slot con nombre?
Repaso
Defina varios <slot name="..."> en el hijo y diríjase a ellos con slot="..." en los elementos del padre.
Preguntas frecuentes
¿La lección «Slots con nombre mediante slot="name"» es gratis?
Sí — el texto completo de «Slots con nombre mediante slot="name"» 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 «Slots con nombre mediante slot="name"»?
Defina varios puntos de inserción en un componente utilizando slots con nombre 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 2 de 4.
¿Cuánto tiempo toma la lección «Slots con nombre mediante slot="name"»?
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
- Slots predeterminados para la proyección de contenido
- Slots con nombre mediante slot="name"
- Contenido alternativo de los slots
- Comprobación del contenido de los slots con $$slots