Vue Academy · Lekcja

Dynamiczne nazwy slotów

v-slot:[dynamicName], programowy wybór slotu, warunkowe renderowanie slotów.

Lekcja 3 z 413 kroki

Dynamiczne nazwy slotów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.

Dlaczego dynamiczne nazwy slotów

Czasami slot, który ma zostać wypełniony, nie jest znany aż do momentu działania programu — zależy od właściwości, stanu lub zmiennej pętli. Vue pozwala obliczać nazwę slotu za pomocą składni z nawiasami kwadratowymi.

Składnia dynamicznego argumentu

Wyrażenie należy umieścić w nawiasach kwadratowych po v-slot:. Vue obliczy jego wartość, aby określić nazwę docelowego slotu.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

Skrót z nawiasami

Skrót # również obsługuje dynamiczne argumenty.

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

Sterowanie nazwą za pomocą stanu

Wyrażenie w nawiasach może odczytywać dowolną wartość reaktywną. Zmiana wartości zmiennej powoduje zmianę slotu, do którego trafia zawartość.

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

Przełączanie renderowanej zawartości

W połączeniu z komponentem podrzędnym definiującym kilka nazwanych slotów dynamiczne nazwy pozwalają aktywować różne obszary za pomocą jednego szablonu, zależnie od stanu.

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

Wybieranie nazw na podstawie właściwości

Właściwość komponentu może decydować o wyborze slotu. Jest to przydatne w konfigurowalnych komponentach opakowujących, w których wywołujący wybiera obszar.

const props = defineProps({ target: String });
// use props.target inside #[props.target]

Iterowanie po dynamicznych slotach

Sloty można renderować w pętli, obliczając każdą nazwę na podstawie elementu iteracji — jest to przydatne w przypadku kolumn tabeli lub systemów kart.

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

Małe litery i prawidłowe nazwy

Dynamiczne nazwy slotów powinny być obliczane do prawidłowych ciągów znaków. Null jest traktowane jako slot domyślny. W szablonach inline należy unikać spacji i znaków nieprawidłowych w nazwach atrybutów HTML.

const name = condition ? "primary" : null;
// null -> default slot

Warunkowy wybór slotu

Operator trójargumentowy umieszczony w nawiasach wybiera slot na podstawie warunku, a wszystko odbywa się w szablonie.

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

Przypadek użycia komponentu kart

Komponent Tabs może renderować zawartość aktywnej karty, obliczając nazwę slotu na podstawie identyfikatora wybranej karty, dzięki czemu komponent nadrzędny zachowuje deklaratywny charakter.

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

Należy zachować czytelność

Dynamiczne sloty są potężnym mechanizmem, ale mogą utrudniać zrozumienie intencji kodu. Należy używać ich, gdy zestaw slotów rzeczywiście zależy od danych; w przypadku kilku stałych slotów zwykłe nazwane sloty są czytelniejsze.

Szybki test

Jaka składnia wybiera slot, którego nazwa jest obliczana w czasie działania programu?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Nauczyli się Państwo, że dynamiczne nazwy slotów używają składni nawiasów kwadratowych v-slot:[expr] lub #[expr], aby na podstawie propsów lub stanu obliczyć, który slot należy wypełnić. Umożliwia to tworzenie konfigurowalnych wrapperów, systemów kart i sterowanego danymi renderowania kolumn.

Bezpłatny start

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

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Dynamiczne nazwy slotów” jest bezpłatna?

Tak — pełny tekst „Dynamiczne nazwy 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 „Dynamiczne nazwy slotów”?

v-slot:[dynamicName], programowy wybór slotu, warunkowe renderowanie 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 3 z 4.

Ile czasu zajmuje lekcja „Dynamiczne nazwy 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

← Powrót do Vue Academy