Slots con ámbito: paso de datos al componente padre
slot :data='value', v-slot='{ data }' en el componente padre y patrón de render prop.
Slots con ámbito: paso de datos al componente padre es una lección gratuita de Vue 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 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.
La limitación de los slots simples
Los slots simples permiten que el padre pase marcado al hijo, pero el padre no puede acceder a los datos internos del hijo. Los slots con ámbito resuelven este problema al permitir que el hijo exponga datos al contenido del slot.
Vincular datos a un slot
El hijo vincula atributos en su elemento <slot>, denominados props del slot. Estos se pasan a todo lo que renderice el padre.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Recibir las props del slot
En el padre, el valor de v-slot se convierte en un objeto que contiene todas las props del slot vinculadas por el hijo.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Desestructurar las props del slot
Como el valor del slot es simplemente un objeto, puede desestructurarlo en línea para escribir un código más claro.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Abreviatura del slot predeterminado con ámbito
Cuando solo utiliza el slot predeterminado, puede colocar v-slot directamente en la etiqueta del componente en lugar de usar un template anidado.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Renombrado y valores predeterminados
La desestructuración admite renombrar valores y asignar valores predeterminados, igual que JavaScript normal.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Slots con nombre y ámbito
Los slots con nombre también pueden tener ámbito. Combine el nombre con las props desestructuradas.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Componentes sin renderizado
Los slots con ámbito permiten aplicar el patrón de componente sin renderizado: un componente gestiona la lógica y el estado, pero no renderiza su propio marcado; simplemente expone datos mediante un slot con ámbito y permite que el padre decida la interfaz.
Un rastreador de ratón sin renderizado
El componente rastrea el cursor y expone sus coordenadas. Solo renderiza su slot predeterminado y pasa x e y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Usar el componente sin renderizado
El padre proporciona todos los elementos visuales y lee los datos expuestos, separando por completo la lógica de la presentación.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Slots con ámbito frente a composables
En Vue 3, los composables suelen reemplazar a los componentes sin renderizado para reutilizar lógica pura. Sin embargo, los slots con ámbito siguen siendo preferibles cuando el hijo debe controlar la iteración o la estructura, como en una lista o una tabla, mientras el padre personaliza cada elemento.
Comprobación rápida
¿Cómo recibe un padre los datos expuestos por un slot con ámbito?
Repaso
Aprendió que los slots con ámbito permiten que un hijo exponga datos al padre mediante props vinculadas en su <slot>. El padre los lee a través del valor de v-slot, a menudo desestructurándolo, lo que permite crear componentes sin renderizado que separan la lógica de la presentación.
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 «Slots con ámbito: paso de datos al componente padre» es gratis?
Sí — el texto completo de «Slots con ámbito: paso de datos al componente padre» 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 ámbito: paso de datos al componente padre»?
slot :data='value', v-slot='{ data }' en el componente padre y patrón de render prop. 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 2 de 4.
¿Cuánto tiempo toma la lección «Slots con ámbito: paso de datos al componente padre»?
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