Generische Vue-Komponenten
defineComponent mit Generics, generisches Script-Setup und typisierte Slot-Props
Generische Vue-Komponenten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Generische Komponenten
Einige Komponenten funktionieren mit beliebigen Datentypen – etwa eine typisierte Liste, ein Auswahlfeld oder eine Tabelle. Mit Vue 3.3 können Sie generische Komponenten schreiben, sodass der Verwender die vollständige Typinferenz behält, statt auf any zurückzufallen.
Das generic-Attribut
Fügen Sie dem <script setup> ein generic-Attribut hinzu. Es deklariert Typ-Parameter, die im gesamten Script verfügbar sind – genau wie bei einer generischen Funktion.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Generische Props
Verwenden Sie den Typ-Parameter in defineProps. In diesem Fall akzeptiert die Komponente ein Array eines beliebigen Typs T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Typinferenz am Aufrufort
Wenn die übergeordnete Komponente items übergibt, leitet TypeScript T aus den Daten ab – ein expliziter Typ ist nicht erforderlich. Übergeben Sie Zahlen, muss selected eine Zahl sein.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Den Typ einschränken
Fügen Sie extends hinzu, um eine bestimmte Struktur zu verlangen. Hier muss T ein id enthalten, was für Listen mit Schlüsseln nützlich ist.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Mehrere Typ-Parameter
Deklarieren Sie mehrere Parameter, die wie bei einer Signatur einer generischen Funktion durch Kommas getrennt werden.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Typisierte Slot-Props
Kombinieren Sie Generics mit typisierten Slots, damit auch der Slot-Inhalt typisiert ist. Deklarieren Sie die Slot-Signatur mit defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Den generischen Slot rendern
Übergeben Sie im Template jedes Element an den Slot. Die übergeordnete Komponente erhält korrekt typisierte Slot-Props.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Mit Typinferenz verwenden
Die übergeordnete Komponente erhält im Slot-Scope automatisch ein typisiertes item – basierend auf dem Array, das sie übergeben hat.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Generische Emits
Typ-Parameter fließen auch in defineEmits ein, sodass eine Ereignis-Nutzlast den generischen Typ enthalten kann.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Wann Sie Generics verwenden sollten
Verwenden Sie generische Komponenten, wenn eine Komponente tatsächlich typunabhängig ist und die Typinferenz durch sie hindurchfließen soll – etwa bei Listen, Tabellen oder Autovervollständigungen. Für feste Datenstrukturen ist eine normal typisierte Komponente einfacher.
Schnelltest
Testen Sie Ihr Wissen über generische Komponenten.
Zusammenfassung
Sie haben generische Komponenten kennengelernt:
- Deklarieren Sie Typ-Parameter mit dem generic-Attribut am script setup.
- Verwenden Sie sie in defineProps für typunabhängige Daten wie items: T[].
- Schränken Sie sie mit extends ein und fügen Sie mehrere Parameter hinzu.
- Typisieren Sie Slot-Props mit defineSlots, damit Verwender die vollständige Typinferenz erhalten.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Generische Vue-Komponenten“ kostenlos?
Ja — der vollständige Text von „Generische Vue-Komponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Generische Vue-Komponenten“?
defineComponent mit Generics, generisches Script-Setup und typisierte Slot-Props Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Generische Vue-Komponenten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- TypeScript-Einrichtung in Vue-Projekten
- Typisierte Props und Emits mit defineProps/defineEmits
- Composables und Refs typisieren
- Generische Vue-Komponenten