Componentes Vue genéricos
defineComponent con genéricos, script setup genérico y props tipadas de slots
Componentes Vue genéricos 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.
Componentes genéricos
Algunos componentes funcionan con cualquier tipo de datos: una lista con tipos, un selector o una tabla. Vue 3.3 permite escribir componentes genéricos para que quien los consuma conserve toda la inferencia de tipos en lugar de recurrir a any.
El atributo generic
Añada un atributo generic a <script setup>. Este declara parámetros de tipo disponibles en todo el script, exactamente igual que una función genérica.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props genéricas
Use el parámetro de tipo en defineProps. En este caso, el componente acepta un array de cualquier tipo T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inferencia de tipos en el punto de llamada
Cuando el componente padre pasa items, TypeScript infiere T a partir de los datos, sin necesidad de especificar el tipo. Si pasa números, selected debe ser un número.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Restricción del tipo
Añada extends para exigir una estructura determinada. En este caso, T debe tener un id, lo que resulta útil para listas con claves.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Varios parámetros de tipo
Declare varios parámetros separados por comas, igual que en la signatura de una función genérica.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props de slot con tipos
Combine genéricos con slots con tipos para que el contenido del slot también tenga tipos. Declare la signatura del slot con defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Renderizado del slot genérico
En la plantilla, pase cada elemento al slot. El componente padre recibe props del slot correctamente tipadas.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Consumo con inferencia
El componente padre obtiene automáticamente un item con tipos en el ámbito del slot, según el array que haya pasado.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Emits genéricos
Los parámetros de tipo también se propagan a defineEmits, de modo que el payload de un evento puede transportar el tipo genérico.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Cuándo usar genéricos
Opte por componentes genéricos cuando un componente sea realmente independiente del tipo y quiera que la inferencia se propague a través de él, por ejemplo, en listas, tablas o autocompletados. Para estructuras de datos fijas, un componente normal con tipos es más sencillo.
Comprobación rápida
Compruebe sus conocimientos sobre los componentes genéricos.
Resumen
Ha aprendido sobre los componentes genéricos:
- Declare parámetros de tipo con el atributo generic en script setup.
- Úselos en defineProps para datos independientes del tipo, como items: T[].
- Restrinja los tipos con extends y añada varios parámetros.
- Tipar las props de los slots con defineSlots permite que quienes consuman el componente obtengan una inferencia completa.
Preguntas frecuentes
¿La lección «Componentes Vue genéricos» es gratis?
Sí — el texto completo de «Componentes Vue genéricos» 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 «Componentes Vue genéricos»?
defineComponent con genéricos, script setup genérico y props tipadas 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 4 de 4.
¿Cuánto tiempo toma la lección «Componentes Vue genéricos»?
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
- Configuración de TypeScript en proyectos Vue
- Props y emits tipados con defineProps/defineEmits
- Tipado de composables y refs
- Componentes Vue genéricos