Nazwane sloty i slot domyślny
Wiele elementów , , skrócona składnia #name.
Nazwane sloty i slot domyślny to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 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.
Czym są sloty
Sloty pozwalają komponentowi nadrzędnemu przekazać znaczniki do komponentu podrzędnego. Komponent podrzędny decyduje, gdzie pojawi się ta zawartość, używając elementu <slot>. Jest to mechanizm dystrybucji zawartości w Vue.
Slot domyślny
Element <slot> bez nazwy jest slotem domyślnym. Wszystko, co komponent nadrzędny umieści między tagami komponentu, trafi właśnie tam.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Używanie slotu domyślnego
Komponent nadrzędny po prostu umieszcza zawartość wewnątrz tagów komponentu.
<Card>
<p>This goes into the default slot</p>
</Card>Dlaczego nazwane sloty
Wiele komponentów ma kilka miejsc wstawiania treści — nagłówek, treść i stopkę. Nazwane sloty nadają każdemu obszarowi identyfikator, dzięki czemu komponent nadrzędny może kierować zawartość do nich osobno.
Deklarowanie nazwanych slotów
Należy dodać atrybut name do każdego slotu. Komponent może łączyć nazwane sloty z jednym domyślnym, czyli nienazwanym, slotem.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Wypełnianie nazwanych slotów za pomocą v-slot
W komponencie nadrzędnym należy umieścić zawartość w elemencie <template> z dyrektywą v-slot:name, aby wskazać nazwany slot.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>Skrót #
v-slot: ma skróconą postać: #. Zatem v-slot:header staje się #header. Jest to idiomatyczna i zwięzła forma.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Domyślna zawartość między tagami
Zawartość umieszczona bezpośrednio między tagami komponentu, a nie wewnątrz nazwanego elementu template, trafia do domyślnego slotu. Można również wskazać go jawnie za pomocą #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Łączenie form niejawnej i jawnej
W ramach tego samego użycia można umieścić zawartość domyślną bez dodatkowego oznaczenia, a nazwane sloty zdefiniować za pomocą elementów template. Vue kieruje każdą część do właściwego miejsca na podstawie jej nazwy.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Kolejność renderowania
Kolejność slotów w komponencie nadrzędnym nie ma znaczenia — ostateczny układ kontroluje szablon komponentu podrzędnego. Zawartość slotu zawsze pojawia się tam, gdzie komponent podrzędny umieścił pasujący element <slot>.
Praktyczny komponent układu
Nazwane sloty ułatwiają tworzenie wielokrotnego użytku szkieletów układu. Jeden komponent <BaseLayout> może obsługiwać dowolną stronę, przyjmując sloty nagłówka, panelu bocznego i głównej zawartości.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Szybki test
Jaki jest skrót dla v-slot:header?
Podsumowanie
Poznano sloty, które rozprowadzają znaczniki komponentu nadrzędnego w komponencie podrzędnym. Nienazwany element <slot> jest slotem domyślnym, a dodanie atrybutu name tworzy nazwane sloty. Komponent nadrzędny wypełnia je za pomocą <template v-slot:name> lub skrótu #name, natomiast szablon komponentu podrzędnego decyduje o ich ostatecznym rozmieszczeniu.
Często zadawane pytania
Czy lekcja „Nazwane sloty i slot domyślny” jest bezpłatna?
Tak — pełny tekst „Nazwane sloty i slot domyślny” 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 „Nazwane sloty i slot domyślny”?
Wiele elementów , , skrócona składnia #name. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Nazwane sloty i slot domyślny”?
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