Zakresowe sloty: przekazywanie danych do rodzica
slot :data='value', v-slot='{ data }' po stronie rodzica, wzorzec render prop.
Zakresowe sloty: przekazywanie danych do rodzica to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.
Ograniczenie zwykłych slotów
Zwykłe sloty pozwalają komponentowi nadrzędnemu przekazać znaczniki dalej, ale nie umożliwiają mu dostępu do wewnętrznych danych komponentu podrzędnego. Sloty zakresowe rozwiązują ten problem, pozwalając komponentowi podrzędnemu udostępniać dane zawartości slotu.
Powiązywanie danych ze slotem
Komponent podrzędny wiąże atrybuty na swoim elemencie <slot>. Są one nazywane właściwościami slotu i są przekazywane do wszystkiego, co renderuje komponent nadrzędny.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Odbieranie właściwości slotu
W komponencie nadrzędnym wartość v-slot staje się obiektem zawierającym wszystkie właściwości slotu powiązane przez komponent podrzędny.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Destrukturyzacja właściwości slotu
Ponieważ wartość slotu jest zwykłym obiektem, można ją destrukturyzować bezpośrednio w kodzie, aby go uprościć.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Skrót dla domyślnego slotu zakresowego
Jeśli używany jest tylko domyślny slot, można umieścić v-slot bezpośrednio na tagu komponentu zamiast w zagnieżdżonym elemencie template.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Zmiana nazw i wartości domyślne
Destrukturyzacja obsługuje zmianę nazw i wartości domyślne tak samo jak zwykły JavaScript.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Nazwane sloty zakresowe
Sloty nazwane również mogą być zakresowe. Należy połączyć nazwę z destrukturyzowanymi właściwościami.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Komponenty bez renderowania
Sloty zakresowe umożliwiają stosowanie wzorca komponentu bez renderowania: komponent obsługuje logikę i stan, ale nie renderuje własnych znaczników — udostępnia tylko dane za pośrednictwem slotu zakresowego i pozwala komponentowi nadrzędnemu zdecydować o interfejsie.
Komponent bez renderowania śledzący kursor
Komponent śledzi położenie kursora i udostępnia współrzędne. Renderuje wyłącznie swój domyślny slot, przekazując x i y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Korzystanie z komponentu bez renderowania
Komponent nadrzędny dostarcza całą warstwę wizualną i odczytuje udostępnione dane, całkowicie oddzielając logikę od prezentacji.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Sloty zakresowe a composables
W Vue 3 composables często zastępują komponenty bez renderowania w przypadku ponownego użycia samej logiki. Sloty zakresowe nadal są jednak lepszym wyborem, gdy komponent podrzędny musi kontrolować iterację lub strukturę, na przykład listy albo tabeli, a komponent nadrzędny ma dostosowywać każdy element.
Szybki test
W jaki sposób komponent nadrzędny odbiera dane udostępnione przez slot zakresowy?
Podsumowanie
Poznano sloty zakresowe, które pozwalają komponentowi podrzędnemu udostępniać dane komponentowi nadrzędnemu przez wiązanie właściwości na jego elemencie <slot>. Komponent nadrzędny odczytuje je za pośrednictwem wartości v-slot, często po jej destrukturyzacji, co umożliwia tworzenie komponentów bez renderowania i oddzielanie logiki od prezentacji.
Często zadawane pytania
Czy lekcja „Zakresowe sloty: przekazywanie danych do rodzica” jest bezpłatna?
Tak — pełny tekst „Zakresowe sloty: przekazywanie danych do rodzica” 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 „Zakresowe sloty: przekazywanie danych do rodzica”?
slot :data='value', v-slot='{ data }' po stronie rodzica, wzorzec render prop. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Zakresowe sloty: przekazywanie danych do rodzica”?
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
- Nazwane sloty i slot domyślny
- Zakresowe sloty: przekazywanie danych do rodzica
- Dynamiczne nazwy slotów
- Zapasowa zawartość slotu i sprawdzanie slotów