Zapasowa zawartość slotu i sprawdzanie slotów
Domyślna zawartość slotu, useSlots() do sprawdzania, czy slot został przekazany, warunkowe renderowanie.
Zapasowa zawartość slotu i sprawdzanie slotów 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.
Zawartość zastępcza slotu
Element <slot> może zawierać domyślne znaczniki. Jeśli komponent nadrzędny dostarczy zawartość tego slotu, ma ona pierwszeństwo; w przeciwnym razie zostanie wyrenderowana zawartość zastępcza znajdująca się wewnątrz slotu.
Definiowanie zawartości zastępczej
Domyślną zawartość należy umieścić między znacznikami slotu. Jest to bezpieczna wartość domyślna dla opcjonalnych slotów.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Zawartość zastępcza w działaniu
Jeśli komponent nadrzędny niczego nie przekaże, zostanie wyświetlony tekst „Prześlij”. Jeśli przekaże zawartość, zastąpi ona zawartość zastępczą.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Zawartość zastępcza nazwanych slotów
Nazwane sloty również obsługują zawartość zastępczą. Slot nagłówka może domyślnie wyświetlać standardowy tytuł, gdy komponent nadrzędny go nie przekaże.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Problem z pustymi wrapperami
Czasami wrapper, taki jak kontener stopki, powinien być renderowany tylko wtedy, gdy komponent nadrzędny rzeczywiście dostarczy zawartość slotu. W tym celu należy sprawdzić, czy slot istnieje.
Composable useSlots
W <script setup> funkcja useSlots() zwraca obiekt, którego kluczami są dostarczone nazwy slotów. Każda wartość jest funkcją zwracającą vnode'y slotu.
import { useSlots } from "vue";
const slots = useSlots();Sprawdzanie, czy przekazano slot
Należy wywołać funkcję slotu i sprawdzić, czy zwrócona zawartość jest prawdziwa. slots.header istnieje tylko wtedy, gdy komponent nadrzędny dostarczył ten slot; wywołanie slots.header?.() bezpiecznie zwraca jego vnode'y.
const hasHeader = computed(() => !!slots.header);Warunkowe renderowanie wrappera
Należy użyć tego sprawdzenia wraz z v-if, aby element wrappera pojawiał się tylko wtedy, gdy istnieje zawartość. Pozwala to uniknąć pustych węzłów DOM.
<header v-if="slots.header">
<slot name="header" />
</header>Dlaczego warto używać opcjonalnego łańcuchowania
slots.header?.() zabezpiecza przed sytuacją, w której slot ma wartość undefined. Bez opcjonalnego łańcuchowania wywołanie niezdefiniowanego slotu powoduje błąd. Ten wzorzec jest często używany w funkcjach renderujących i obliczanych warunkach.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots w szablonie
Szablony udostępniają te same dane za pośrednictwem $slots. Można bezpośrednio sprawdzić $slots.footer w dyrektywie v-if, bez importowania useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Połączenie wszystkiego
Solidny komponent karty renderuje każdą sekcję tylko wtedy, gdy dostarczono jej slot, dzięki czemu znaczniki pozostają przejrzyste, a style przewidywalne.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Szybkie sprawdzenie
Jak w script setup sprawdzić, czy komponent nadrzędny dostarczył slot „header”?
Podsumowanie
Nauczyli się Państwo, że sloty mogą zawierać zawartość zastępczą renderowaną wtedy, gdy komponent nadrzędny nie dostarczy slotu. Aby warunkowo renderować wrappery, należy sprawdzać obecność slotu za pomocą useSlots() (slots.header?.()) w script setup albo $slots.header w szablonach.
Często zadawane pytania
Czy lekcja „Zapasowa zawartość slotu i sprawdzanie slotów” jest bezpłatna?
Tak — pełny tekst „Zapasowa zawartość slotu i sprawdzanie slotów” 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 „Zapasowa zawartość slotu i sprawdzanie slotów”?
Domyślna zawartość slotu, useSlots() do sprawdzania, czy slot został przekazany, warunkowe renderowanie. Ć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 „Zapasowa zawartość slotu i sprawdzanie slotów”?
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