Componentes Vue genéricos
defineComponent com genéricos, configuração genérica de script e props de slots tipadas.
Componentes Vue genéricos é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Componentes genéricos
Alguns componentes funcionam com qualquer tipo de dados — uma lista tipada, um seletor, uma tabela. O Vue 3.3 permite escrever componentes genéricos, para que o consumidor mantenha a inferência completa de tipos em vez de recorrer a any.
O atributo genérico
Adicione um atributo generic a <script setup>. Ele declara parâmetros de tipo disponíveis em todo o script, exatamente como uma função genérica.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props genéricas
Use o parâmetro de tipo em defineProps. Aqui, o componente aceita uma matriz de qualquer tipo T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inferência de tipos no local da chamada
Quando o componente pai passa items, o TypeScript infere T a partir dos dados — não é necessário especificar o tipo. Passe números, e selected deverá ser um número.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Restringindo o tipo
Adicione extends para exigir determinado formato. Aqui, T deve ter um id, o que é útil para listas indexadas.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Vários parâmetros de tipo
Declare vários parâmetros separados por vírgulas, assim como em uma assinatura de função genérica.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props tipadas de slot
Combine genéricos com slots tipados para que o conteúdo do slot também seja tipado. Declare a assinatura do slot com defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Renderizando o slot genérico
No modelo, passe cada item para o slot. O componente pai recebe Props de slot corretamente tipadas.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Consumindo com inferência
O componente pai recebe automaticamente um item tipado no escopo do slot — com base na matriz que passou.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Emits genéricos
Os parâmetros de tipo também chegam a defineEmits, portanto a carga útil de um evento pode carregar o tipo genérico.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Quando usar genéricos
Use componentes genéricos quando um componente for realmente independente de tipo e você quiser que a inferência passe por ele — listas, tabelas e componentes de preenchimento automático. Para formatos de dados fixos, um componente tipado comum é mais simples.
Verificação rápida
Teste seus conhecimentos sobre componentes genéricos.
Recapitulação
Você aprendeu sobre componentes genéricos:
- Declare parâmetros de tipo com o atributo generic em script setup.
- Use-os em defineProps para dados independentes de tipo, como items: T[].
- Restringa-os com extends e adicione vários parâmetros.
- Tipar as Props de slot com defineSlots permite que os consumidores obtenham inferência completa.
Perguntas Frequentes
A aula “Componentes Vue genéricos” é grátis?
Sim — o texto completo de “Componentes Vue genéricos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Componentes Vue genéricos”?
defineComponent com genéricos, configuração genérica de script e props de slots tipadas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Componentes Vue genéricos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do TypeScript em projetos Vue
- Props e emits tipados com defineProps/defineEmits
- Tipagem de composables e refs
- Componentes Vue genéricos