Generyczne komponenty Vue
defineComponent z generykami, generyczne script setup oraz typowane props slotów.
Generyczne komponenty Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Komponenty generyczne
Niektóre komponenty działają z dowolnym typem danych — typowana lista, select czy tabela. Vue 3.3 pozwala tworzyć komponenty generyczne, dzięki czemu kod korzystający z komponentu zachowuje pełną inferencję typów zamiast przechodzić na any.
Atrybut generic
Należy dodać atrybut generic do <script setup>. Deklaruje on parametry typów dostępne w całym skrypcie, dokładnie tak jak w funkcji generycznej.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Generyczne propsy
Parametru typu należy użyć w defineProps. W tym przypadku komponent akceptuje tablicę dowolnego typu T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Wnioskowanie typu w miejscu wywołania
Gdy komponent nadrzędny przekazuje items, TypeScript wnioskuje T na podstawie danych — jawny typ nie jest potrzebny. Po przekazaniu liczb właściwość selected musi być liczbą.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Ograniczanie typu
Należy dodać extends, aby wymusić określony kształt. W tym przypadku T musi zawierać id, co jest przydatne w listach z kluczami.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Wiele parametrów typów
Można zadeklarować kilka parametrów, oddzielając je przecinkami, tak jak w sygnaturze funkcji generycznej.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Typowane propsy slotu
Generyki można połączyć z typowanymi slotami, aby zawartość slotu również miała określony typ. Sygnaturę slotu należy zadeklarować za pomocą defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Renderowanie generycznego slotu
W szablonie należy przekazać każdy element do slotu. Komponent nadrzędny otrzyma prawidłowo typowane propsy slotu.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Używanie z wnioskowaniem
Komponent nadrzędny automatycznie otrzymuje typowany element item w zakresie slotu — na podstawie przekazanej tablicy.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Generyczne zdarzenia
Parametry typów są również przekazywane do defineEmits, dzięki czemu payload zdarzenia może zawierać typ generyczny.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Kiedy używać generyków
Warto używać komponentów generycznych, gdy komponent jest rzeczywiście niezależny od typu i zależy Państwu na przepływie inferencji przez cały komponent — na przykład w listach, tabelach i polach autouzupełniania. W przypadku ustalonych struktur danych prostszy będzie zwykły typowany komponent.
Szybki test
Sprawdźmy wiedzę na temat komponentów generycznych.
Podsumowanie
Opanowano komponenty generyczne:
- Deklaruj parametry typów za pomocą atrybutu generic w script setup.
- Używaj ich w defineProps dla danych niezależnych od typu, takich jak items: T[].
- Ograniczaj typ za pomocą extends i dodawaj wiele parametrów.
- Typuj propsy slotu za pomocą defineSlots, aby kod korzystający z komponentu otrzymywał pełną inferencję.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Generyczne komponenty Vue” jest bezpłatna?
Tak — pełny tekst „Generyczne komponenty Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Generyczne komponenty Vue”?
defineComponent z generykami, generyczne script setup oraz typowane props slotów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Generyczne komponenty Vue”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja TypeScript w projektach Vue
- Typowane props i emits z defineProps/defineEmits
- Typowanie composable i refów
- Generyczne komponenty Vue