Sloty i sloty zakresowe
Zbudują Państwo elastyczne komponenty z wykorzystaniem slotów i slotów zakresowych.
Sloty i sloty zakresowe to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. 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 3 lekcji w sumie.
Czym są sloty?
Sloty pozwalają komponentowi nadrzędnemu wstrzykiwać zawartość do szablonu komponentu podrzędnego.
- Propsy przekazują dane, a sloty przekazują znaczniki
- Doskonale sprawdzają się w obudowach układów, kartach i oknach modalnych
- Komponent podrzędny decyduje, gdzie umieścić zawartość
Slot domyślny
Komponent podrzędny definiuje symbol zastępczy za pomocą elementu slot. Zawartość umieszczona przez komponent nadrzędny między znacznikami wypełnia ten symbol.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Używanie slotu domyślnego
Komponent nadrzędny przekazuje zawartość między znacznikami komponentu.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Zawartość zastępcza slotu
Slot może udostępniać zawartość zastępczą, wyświetlaną wtedy, gdy komponent nadrzędny niczego nie przekaże.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Wiele nazwanych slotów
Named slots pozwalają komponentowi udostępnić kilka miejsc wstawiania zawartości.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Wypełnianie nazwanych slotów
Komponent nadrzędny wskazuje nazwany slot za pomocą v-slot:name na elemencie template.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>Skrót v-slot
Dyrektywa v-slot ma skrót: symbol #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Sloty zakresowe
Sloty zakresowe pozwalają komponentowi podrzędnemu przekazywać dane do zawartości slotu.
- Komponent podrzędny wiąże dane na elemencie slotu
- Komponent nadrzędny odbiera je jako propsy slotu
- Jest to przydatne, gdy komponent podrzędny zarządza danymi, a nadrzędny wyglądem
Udostępnianie danych przez komponent podrzędny
Komponent podrzędny wiąże atrybuty na slocie, aby udostępnić dane.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Korzystanie z danych slotu zakresowego
Komponent nadrzędny odbiera dane za pośrednictwem v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Kiedy używać poszczególnych slotów
Krótki przewodnik:
- Slot domyślny służy do wstawiania prostej zawartości
- Named slots służą do obsługi wielu obszarów (układu)
- Sloty zakresowe są przydatne, gdy komponent nadrzędny potrzebuje wewnętrznych danych komponentu podrzędnego
Szybki test
Proszę sprawdzić swoją znajomość slotów.
Podsumowanie: sloty
W tym rozdziale poznali Państwo dystrybucję zawartości za pomocą slotów:
- Slot domyślny wstawia znaczniki przekazane przez komponent nadrzędny
- Zawartość zastępcza jest wyświetlana, gdy niczego nie przekazano
- Named slots (v-slot:name, skrót #) wskazują konkretne obszary
- Sloty zakresowe przekazują dane komponentu podrzędnego do zawartości slotu
Następnie: podstawy reaktywności.
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 „Sloty i sloty zakresowe” jest bezpłatna?
Tak — pełny tekst „Sloty i sloty zakresowe” 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 3 lekcji w sumie.
Co nauczysz się w „Sloty i sloty zakresowe”?
Zbudują Państwo elastyczne komponenty z wykorzystaniem slotów i slotów zakresowych. Ć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 3 z 3.
Ile czasu zajmuje lekcja „Sloty i sloty zakresowe”?
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
- Tworzenie i rejestrowanie komponentów
- Props i własne zdarzenia
- Sloty i sloty zakresowe