Cuando trabajas con componentes reutilizables en Vue.js, llega un momento en que los slots tradicionales no son suficientes. Necesitas que el componente hijo comparta sus datos con el padre para que este decida cómo renderizarlos. Aquí es donde los Scoped Slots se convierten en una herramienta fundamental para construir interfaces flexibles y personalizables.
¿Qué son los Scoped Slots y cómo funcionan?
Los Scoped Slots comparten las características básicas de los slots convencionales, pero añaden una capacidad crucial: propagar datos a nivel de scope. Esto significa que un componente hijo puede emitir información hacia el componente padre, y el padre puede utilizar esos datos para modificar o crear elementos dentro del hijo [0:20].
En la práctica, dentro del componente padre se utiliza el elemento <template> junto con el atributo slot-scope. A través de este atributo, se accede a las propiedades que el componente hijo está emitiendo, conocidas como slot props [0:48].
html
<slot-example>
<template slot-scope="slotProps">
{{ slotProps.message }}
</template>
</slot-example>
En este ejemplo, el componente SlotExample emite hacia afuera sus slot props, y el padre los renderiza como cualquier plantilla convencional, mostrando en este caso el atributo message obtenido directamente del scope [1:05].
¿Cuándo conviene usar Scoped Slots en tus componentes?
Un caso de uso muy claro aparece cuando trabajas con tablas dinámicas [1:22]. Imagina que cada fila necesita un diseño diferente o atributos particulares. Si modificas directamente el componente de fila, todas las filas se verían afectadas. Con los Scoped Slots, puedes analizar fila por fila o columna por columna y agregar contenido personalizado en cada una sin alterar el componente base.
¿Qué cambió en la versión 2.6.0 de Vue?
A partir de la versión 2.6.0, tanto los slots como los Scoped Slots recibieron una sintaxis actualizada [1:52]. Ahora se utiliza la directiva v-slot como shorthand:
html
<current-user v-slot="{ user }">
{{ user.name }}
</current-user>
Cuando se trata del slot por defecto, no necesitas especificar un nombre. Vue interpreta automáticamente que estás escuchando el slot predeterminado. Sin embargo, cuando utilizas named slots (slots nombrados), debes indicar explícitamente qué slot quieres consumir [2:15].
¿Cómo se aplican los Scoped Slots en una lista de tareas?
Un ejemplo práctico es un componente TodoList que itera sobre tareas filtradas y emite cada tarea hacia el padre a través de un slot [2:30]:
html
<todo-list :todos="todos">
<template v-slot="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>
- El componente hijo genera la iteración y enlaza cada elemento con su identificador.
- El padre recibe el objeto
todo y decide cómo renderizarlo.
- Si la tarea está completa, se muestra una palomita.
- Si tiene texto, se muestra el contenido correspondiente.
Sin Scoped Slots, tendrías que hacer estas modificaciones directamente dentro del componente hijo [3:15]. Cada vez que necesitaras un cambio visual, deberías alterar el componente, rompiendo su reutilización. Con esta técnica, simplemente extraes los datos y personalizas el contenido desde el padre.
¿Por qué los Scoped Slots mejoran la arquitectura de tus componentes?
La ventaja principal es la separación de responsabilidades: el hijo se encarga de la lógica y los datos, mientras que el padre controla la presentación. Esto genera componentes más limpios, reutilizables y fáciles de mantener.
- Permiten crear plantillas personalizadas por cada elemento iterado.
- Evitan modificar componentes internos para cambios visuales puntuales.
- Facilitan la composición de interfaces complejas con datos dinámicos.
Si quieres ver cómo se implementan los Scoped Slots en un proyecto real, comparte tu experiencia aplicándolos en tus propios componentes.
