Componenti Vue generici
defineComponent con generics, script setup generico, props degli slot tipizzate.
Componenti Vue generici è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Componenti generici
Alcuni componenti funzionano con qualsiasi tipo di dati, ad esempio una lista tipizzata, un selettore o una tabella. Vue 3.3 consente di scrivere componenti generici, così chi li utilizza mantiene la piena inferenza dei tipi invece di ricadere in any.
L'attributo generic
Aggiungete un attributo generic a <script setup>. Dichiara i parametri di tipo disponibili in tutto lo script, proprio come in una funzione generica.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props generiche
Usate il parametro di tipo in defineProps. In questo caso il componente accetta un array di qualsiasi tipo T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inferenza dei tipi nel punto di chiamata
Quando il componente padre passa items, TypeScript inferisce T dai dati: non serve alcun tipo esplicito. Se passate numeri, anche selected deve essere un numero.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Vincolare il tipo
Aggiungete extends per richiedere una determinata struttura. In questo caso T deve avere un id, utile per le liste con chiave.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Più parametri di tipo
Dichiarate diversi parametri separandoli con virgole, proprio come in una firma di funzione generica.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props tipizzate degli slot
Combinate i generici con gli slot tipizzati, così anche il contenuto dello slot viene tipizzato. Dichiarate la firma dello slot con defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Renderizzare lo slot generico
Nel template, passate ogni elemento allo slot. Il componente padre riceve props dello slot tipizzate correttamente.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Utilizzare l'inferenza
Il componente padre ottiene automaticamente un item tipizzato nell'ambito dello slot, in base all'array passato.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Eventi generici
I parametri di tipo confluiscono anche in defineEmits, quindi il payload di un evento può contenere il tipo generico.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Quando usare i generici
Scegliete i componenti generici quando un componente è realmente indipendente dal tipo e volete che l'inferenza si propaghi al suo interno, ad esempio per liste, tabelle e autocomplete. Per strutture di dati fisse, un normale componente tipizzato è più semplice.
Verifica rapida
Verificate la vostra conoscenza dei componenti generici.
Riepilogo
Avete imparato a usare i componenti generici:
- Dichiarate i parametri di tipo con l'attributo generic su script setup.
- Usateli in defineProps per dati indipendenti dal tipo, come items: T[].
- Imponete vincoli con extends e aggiungete più parametri.
- Tipizzate le props degli slot con defineSlots, così chi utilizza il componente ottiene la piena inferenza.
Domande Frequenti
La lezione «Componenti Vue generici» è gratuita?
Sì — il testo completo di «Componenti Vue generici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Componenti Vue generici»?
defineComponent con generics, script setup generico, props degli slot tipizzate. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Componenti Vue generici»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di TypeScript nei progetti Vue
- Props ed emit tipizzati con defineProps/defineEmits
- Tipizzazione di composable e ref
- Componenti Vue generici