Slots con nombre y slot predeterminado
Varios , y sintaxis abreviada #name.
Slots con nombre y slot predeterminado es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué son los slots
Los slots permiten que un componente padre pase marcado a un componente hijo. El hijo decide dónde aparece ese contenido mediante el elemento <slot>. Esta es la distribución de contenido de Vue.
El slot predeterminado
Un <slot> sin nombre es el slot predeterminado. Todo lo que el padre coloque entre las etiquetas del componente aparecerá allí.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Usar el slot predeterminado
El padre simplemente anida el contenido dentro de las etiquetas del componente.
<Card>
<p>This goes into the default slot</p>
</Card>Por qué usar slots con nombre
Muchos componentes tienen varios puntos de inserción: un encabezado, un cuerpo y un pie de página. Los slots con nombre asignan un identificador a cada región para que el padre pueda dirigir el contenido a cada una por separado.
Declarar slots con nombre
Agregue un atributo name a cada slot. Un componente puede combinar slots con nombre y un único slot predeterminado (sin nombre).
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Rellenar slots con nombre mediante v-slot
En el padre, coloque el contenido dentro de un <template> con la directiva v-slot:name para dirigirlo a un slot con nombre.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>La abreviatura #
v-slot: tiene una abreviatura: #. Por tanto, v-slot:header se convierte en #header. Esta es la forma idiomática y concisa.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Contenido predeterminado entre las etiquetas
El contenido colocado directamente entre las etiquetas del componente, no dentro de un template con nombre, se dirige al slot predeterminado. También puede seleccionarlo explícitamente mediante #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Mezclar lo implícito y lo explícito
Puede escribir el contenido predeterminado directamente y los slots con nombre mediante templates en el mismo uso. Vue dirige cada parte al lugar correcto según su nombre.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Orden de renderizado
El orden de los slots en el padre no importa: el template del hijo controla la disposición final. El contenido de un slot siempre aparece donde el hijo colocó el <slot> correspondiente.
Un componente de diseño práctico
Los slots con nombre permiten crear estructuras de diseño reutilizables. Un único <BaseLayout> puede alojar cualquier página al aceptar slots para el encabezado, la barra lateral y el contenido principal.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Comprobación rápida
¿Cuál es la abreviatura de v-slot:header?
Repaso
Aprendió que los slots distribuyen el marcado del padre en un hijo. Un <slot> sin nombre es el slot predeterminado; agregar name crea slots con nombre. Los padres los rellenan con <template v-slot:name> o con la abreviatura #name, y el template del hijo decide su ubicación final.
Preguntas frecuentes
¿La lección «Slots con nombre y slot predeterminado» es gratis?
Sí — el texto completo de «Slots con nombre y slot predeterminado» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Slots con nombre y slot predeterminado»?
Varios , y sintaxis abreviada #name. Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 1 de 4.
¿Cuánto tiempo toma la lección «Slots con nombre y slot predeterminado»?
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 Vue Academy?
Sí. Cada lección de Vue 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 con nombre y slot predeterminado
- Slots con ámbito: paso de datos al componente padre
- Nombres dinámicos de slots
- Contenido alternativo de slots y comprobación de slots