Los slots en Vue.js te permiten crear componentes reutilizables que aceptan contenido dinámico en su interior, igual que un tag HTML envuelve elementos hijos. Si ya sabes crear componentes y quieres llevar tu arquitectura a un nivel más modular, esta es la pieza que te faltaba para diseñar layouts, headers y estructuras flexibles sin duplicar código.

Por qué necesitas slots cuando reutilizas componentes

Cuando empiezas a separar tu aplicación en componentes, llega un punto en el que el contenido fijo se vuelve un problema. Imagina que creas un componente v-header con un título escrito directamente dentro del template. Cada vez que quieras cambiar ese título, tendrías que editar el componente. Poco práctico, ¿verdad?

Los slots resuelven justo eso. Funcionan como un espacio reservado dentro de un componente padre donde puedes inyectar cualquier contenido desde fuera: HTML nativo, otros componentes propios o incluso piezas de librerías externas.

¿Qué es un slot en Vue.js? Es un tag especial que actúa como hueco dentro de un componente. Todo lo que escribas como hijo del componente se renderiza en ese hueco, manteniendo los estilos y la lógica del padre.

Cómo se crea un slot básico paso a paso

El proceso es directo y se apoya en el tag <slot> que ya viene incluido en Vue.js [01:50]. Dentro del template del componente colocas el slot donde quieras que aparezca el contenido externo.

Los pasos clave son estos:

• Define tu componente con la convención b- o v- para indicar que es base de otros, por ejemplo v-header.
• Dentro de su template coloca el tag <slot></slot> en la posición donde quieres recibir contenido.
• Al usar el componente en el padre, escribe el contenido entre las etiquetas de apertura y cierre.

Así, si pones un <button> o un título dentro de <v-header>...</v-header>, ese contenido aparecerá donde definiste el slot. El componente conserva su diseño y CSS, pero su contenido se vuelve flexible.

Cómo usar slots con nombre para layouts complejos

Cuando un componente necesita varias zonas distintas, como un layout con cabecera y cuerpo, un solo slot no alcanza. Aquí entran los slots con nombre, que te permiten distinguir dónde va cada bloque de contenido [04:30].

Cómo defines slots con nombre en el componente padre

Dentro del template del componente padre declaras varios slots y le das a cada uno un atributo name. Por ejemplo, un slot con name="header" y otro con name="content". El slot sin nombre se considera default.

html

<div> <slot name="header"></slot> <slot name="content"></slot> </div>

De esta forma le indicas a Vue dónde montar cada pieza de contenido externo.

Cómo inyectas contenido en un slot con nombre

Del lado del componente que consume el layout, usas el tag <template> junto a la directiva v-slot:nombreDelSlot. Es un componente que ya provee Vue.js para envolver contenido sin renderizar un elemento extra.

html <v-layout> <template v-slot:header> <h1>Mi título</h1> </template> <template v-slot:content> <p>Contenido de la página</p> </template> </v-layout>

¿Cuándo conviene usar slots con nombre? Cuando un componente tiene dos o más zonas claramente diferenciadas, como cabecera, cuerpo y pie. Te evita crear varios componentes separados y mantiene los estilos centralizados.

Qué ganas al modularizar con slots en Vue

La ventaja real aparece cuando piensas en escala. Puedes diseñar un sistema de columnas, un layout con menú superior, o un componente complejo donde cada zona tiene su propio estilo, y simplemente rellenar cada hueco desde fuera.

Algunos beneficios concretos:

• Mantienes el CSS y la lógica dentro del componente padre, sin duplicar reglas.
• Reutilizas la misma estructura visual con contenidos completamente distintos.
• Combinas HTML nativo, componentes propios y librerías externas en el mismo slot.
• Escalas a cualquier cantidad de slots según la complejidad del componente.

Esto no se limita a layouts. Cualquier componente que necesite organizar varias partes, como tarjetas, modales o paneles, gana claridad y flexibilidad cuando lo construyes con slots.

¿Qué otros usos se te ocurren para los slots en tus propios proyectos? Déjamelo en los comentarios y nos vemos en la próxima clase.