Contenido alternativo de slots y comprobación de slots
Contenido predeterminado del slot, uso de useSlots() para comprobar si se proporciona un slot y renderizado condicional.
Contenido alternativo de slots y comprobación de slots es una lección gratuita de Vue 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 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.
Contenido alternativo de los slots
Un <slot> puede contener un marcado predeterminado. Si el componente padre proporciona contenido para ese slot, prevalece el contenido del padre; si no, se renderiza el contenido alternativo incluido en el slot.
Definir contenido alternativo
Coloque el contenido predeterminado entre las etiquetas del slot. Es un valor predeterminado adecuado para slots opcionales.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>El contenido alternativo en acción
Si el componente padre no pasa nada, se muestra «Submit». Si pasa contenido, este reemplaza el contenido alternativo.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Contenido alternativo para slots con nombre
Los slots con nombre también admiten contenido alternativo. Un slot de encabezado puede mostrar de forma predeterminada un título estándar cuando el componente padre lo omite.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>El problema de los wrappers vacíos
A veces solo querrá renderizar un elemento wrapper, como un contenedor de pie de página, cuando el componente padre proporcione realmente contenido para el slot. Para ello, debe comprobar si existe contenido para el slot.
El composable useSlots
En <script setup>, useSlots() devuelve un objeto cuyas claves son los nombres de los slots proporcionados. Cada valor es una función que devuelve los vnodes del slot.
import { useSlots } from "vue";
const slots = useSlots();Comprobar si se proporcionó un slot
Llame a la función del slot y compruebe si devuelve contenido truthy. slots.header solo existe si el componente padre proporcionó ese slot; llamar a slots.header?.() devuelve sus vnodes de forma segura.
const hasHeader = computed(() => !!slots.header);Renderizar el wrapper de forma condicional
Utilice la comprobación con v-if para que el elemento wrapper aparezca solo cuando haya contenido y evitar nodos DOM vacíos.
<header v-if="slots.header">
<slot name="header" />
</header>Por qué usar optional chaining
slots.header?.() evita errores si el slot es undefined. Sin optional chaining, llamar a un slot undefined produce una excepción. Este patrón es habitual en las funciones de renderizado y en las comprobaciones de valores calculados.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots en la plantilla
Las plantillas exponen los mismos datos mediante $slots. Puede comprobar $slots.footer directamente en un v-if sin importar useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Integrarlo todo
Un componente de tarjeta robusto renderiza cada sección solo cuando se proporciona su slot, lo que mantiene el marcado limpio y los estilos predecibles.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Comprobación rápida
¿Cómo comprueba si el componente padre proporcionó un slot «header» en script setup?
Repaso
Ha aprendido que los slots pueden contener contenido alternativo, que se renderiza cuando el componente padre omite el slot. Para renderizar wrappers de forma condicional, compruebe la presencia del slot con useSlots() (slots.header?.()) en script setup o con $slots.header en las plantillas.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Contenido alternativo de slots y comprobación de slots» es gratis?
Sí — el texto completo de «Contenido alternativo de slots y comprobación de slots» 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 «Contenido alternativo de slots y comprobación de slots»?
Contenido predeterminado del slot, uso de useSlots() para comprobar si se proporciona un slot y renderizado condicional. 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 4 de 4.
¿Cuánto tiempo toma la lección «Contenido alternativo de slots y comprobación de slots»?
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