Nombres dinámicos de slots
v-slot:[dynamicName], selección programática de slots y renderizado condicional de slots.
Nombres dinámicos de slots es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.
Por qué usar nombres de slot dinámicos
A veces el slot que desea rellenar no se conoce hasta el tiempo de ejecución: depende de una prop, del estado o de una variable de un bucle. Vue permite calcular el nombre de un slot mediante la sintaxis de corchetes.
La sintaxis de argumento dinámico
Coloque una expresión entre corchetes después de v-slot:. Vue la evalúa para determinar el nombre del slot de destino.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>Abreviatura con corchetes
La abreviatura # también admite argumentos dinámicos.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>Determinar el nombre a partir del estado
La expresión entre corchetes puede leer cualquier valor reactivo. Cambiar la variable modifica el slot que recibe el contenido.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";Cambiar el contenido renderizado
Combinados con un hijo que define varios slots con nombre, los nombres dinámicos permiten mostrar distintas regiones de una plantilla según el estado.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>Elegir nombres a partir de props
Una prop del componente puede decidir el slot. Esto resulta útil para contenedores configurables en los que quien llama al componente elige la región.
const props = defineProps({ target: String });
// use props.target inside #[props.target]Iterar sobre slots dinámicos
Puede renderizar slots en un bucle calculando cada nombre a partir del elemento del bucle, algo útil para columnas de tablas o sistemas de pestañas.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>Nombres en minúsculas y válidos
Los nombres de slot dinámicos deben resolverse en cadenas válidas. El valor null se interpreta como el slot predeterminado. Evite los espacios y los caracteres que no sean válidos en los nombres de atributos HTML al utilizar templates en línea.
const name = condition ? "primary" : null;
// null -> default slotSelección condicional de slots
Una expresión ternaria dentro de los corchetes permite elegir entre slots según una condición, directamente en el template.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>Un caso de uso para un componente de pestañas
Un componente Tabs puede renderizar el contenido de la pestaña activa calculando el nombre del slot a partir del id de la pestaña seleccionada, manteniendo el padre declarativo.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>Mantener la claridad
Los slots dinámicos son potentes, pero pueden ocultar la intención del código. Prefiéralos cuando el conjunto de slots dependa realmente de los datos; para un grupo fijo y reducido, los slots con nombre simples resultan más claros.
Comprobación rápida
¿Qué sintaxis selecciona un slot cuyo nombre se calcula en tiempo de ejecución?
Repaso
Ha aprendido que los nombres de slot dinámicos utilizan la sintaxis de corchetes v-slot:[expr] o #[expr] para calcular qué slot rellenar a partir de props o del estado, lo que permite crear wrappers configurables, sistemas de pestañas y renderizado de columnas basado en datos.
Preguntas frecuentes
¿La lección «Nombres dinámicos de slots» es gratis?
Sí — el texto completo de «Nombres dinámicos 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 «Nombres dinámicos de slots»?
v-slot:[dynamicName], selección programática de slots y renderizado condicional de slots. 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 3 de 4.
¿Cuánto tiempo toma la lección «Nombres dinámicos 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