Jak korzystać z automatów w Svelte

Svelte oferuje różne sposoby komunikacji między komponentami, w tym rekwizyty, sloty itp. Będziesz musiał zintegrować sloty, aby tworzyć elastyczne komponenty wielokrotnego użytku w swoich aplikacjach Svelte.

Zrozumienie slotów w Svelte

W kontekście frameworka Svelte, sloty działają analogicznie do ich odpowiedników w ekosystemie Vue, umożliwiając przesyłanie danych z elementu nadrzędnego do komponentu podrzędnego poprzez wyznaczone przestrzenie zastępcze w układzie tego ostatniego.

Praca ze slotami w Svelte pozwala na wysoki stopień elastyczności w tworzeniu komponentów, które można dostosować do różnych scenariuszy poprzez wykorzystanie zwykłego tekstu, znaczników HTML lub dodatkowych komponentów Svelte. Włączenie slotów ułatwia rozwój wszechstronnych i adaptowalnych elementów, które zaspokajają różnorodne potrzeby.

Tworzenie podstawowego slotu

Aby włączyć slot do układu komponentu Svelte, użyj konstrukcji umieszczonej wewnątrz szablonu wspomnianego komponentu. Ten symbol zastępczy jest przeznaczony do akceptowania i wyświetlania materiału pochodzącego z odpowiedniej jednostki nadrzędnej. Jednocześnie, domyślnie, ten slot będzie prezentował dowolną substancję, która zostanie do niego wstawiona.

Włączenie slotów do funkcji zdefiniowanej przez użytkownika można osiągnąć poprzez zdefiniowanie każdego wymaganego parametru w sygnaturze funkcji, jak pokazano poniżej:

 <main>
  This is the child component
  <slot></slot>
</main>

Podany fragment kodu przedstawia instancję komponentu podrzędnego, który wykorzystuje wyznaczony obszar znany jako “slot” do odbierania treści z powiązanego z nim komponentu nadrzędnego.

Aby przesłać dane z elementu nadrzędnego do elementu podrzędnego podczas tworzenia stron internetowych, należy najpierw wprowadzić element podrzędny do elementu nadrzędnego za pomocą importu. Następnie, zamiast wykorzystywać samozamykający się znacznik do renderowania elementu podrzędnego, należy zastosować zarówno znacznik otwierający, jak i zamykający. Ostatecznie, w ramach obejmujących znaczników, należy wyrazić informacje, które mają być przekazywane między elementem nadrzędnym i podrzędnym.

Na przykład:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span>This is a message from the parent component</span>
 </Component>
</main>

W przypadku, gdy komponent nadrzędny nie dostarczy zawartości do slotów komponentów podrzędnych, w tych slotach może zostać dostarczona zawartość domyślna lub awaryjna. Służy to jako materiał wyświetlany, gdy zawartość nie jest dostarczana przez rodzica.

Aby zapewnić alternatywną zawartość w przypadku błędu, można użyć atrybutu “fallback” w znacznikach SVG w następujący sposób:

 <main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

Podany fragment kodu służy jako opcja zapasowa, wyświetlając frazę “Fallback Content” w wyznaczonym miejscu, gdy element nadrzędny nie dostarcza alternatywnego materiału.

Przekazywanie danych przez slot za pomocą rekwizytów slotu

Svelte umożliwia przesyłanie informacji poprzez wykorzystanie “rekwizytów slotu” w celu dostarczenia określonych szczegółów w wyznaczonym obszarze, często określanym jako “slot”, który znajduje się w innym komponencie. Proces ten ma miejsce, gdy istnieje wymóg przekazywania szczegółowych informacji z jednego komponentu do drugiego podczas wdrażania tego ostatniego.

Na przykład:

 <script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

Przedstawiony fragment kodu stanowi komponent Svelte. Wewnątrz znacznika zadeklarowano nazwaną zmienną “message”, której przypisano wartość “Hello Parent Component!”. Ponadto zmienna “message” jest przekazywana jako argument do właściwości “slot” o tej samej nazwie. W rezultacie umożliwia to komponentowi nadrzędnemu dostarczanie treści do wyznaczonego slotu “message” poprzez dostarczanie kontekstowo istotnych informacji do wyświetlenia zamiast zakodowanego na stałe ciągu “Hello Parent Component!”.

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

Wykorzystanie składni umożliwia komponentowi nadrzędnemu uzyskanie dostępu do właściwości slotu message dostarczonej przez komponent podrzędny, w którym zawartość zawarta w elemencie pochodzi bezpośrednio z wyżej wymienionego slotu.

Należy zauważyć, że użycie pojedynczej właściwości slotu może być niewystarczające w niektórych przypadkach. W takich przypadkach może być konieczne użycie wielu podpór slotów w celu uwzględnienia dodatkowych informacji lub wymagań.

 <script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

W komponencie nadrzędnym:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

Praca z nazwanymi slotami

Podczas korzystania z nazwanych slotów w komponentach, zapewniają one skuteczny sposób przekazywania wielu slotów, jednocześnie nadając im różne nazwy. Takie podejście ułatwia bardziej efektywne zarządzanie wieloma slotami i pozwala na tworzenie skomplikowanych komponentów o różnych konfiguracjach.

należy podać etykietę lub tytuł żądanej lokalizacji, aby zawartość w danym pojemniku mogła zostać dowolnie przypisana.

 <div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

Rozważmy przypadek, w którym mamy dwa identyfikowalne pojemniki, a mianowicie oznaczenie “nagłówka” i oznaczenie “stopki”. Wykorzystując wszechstronną właściwość “slot”, można przesyłać dane do każdego z tych przedziałów z elementu składowego wyższego rzędu w strukturze hierarchicznej.

Na przykład:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

Przedstawiony kod ilustruje proces wykorzystywania atrybutów “slot” i “prop” do przekazywania treści do wyznaczonych slotów. W początkowym elemencie " “, slot “header” jest targetowany poprzez przypisanie atrybutowi “slot” wartości “header”. W rezultacie załączony tekst zostanie wyświetlony w wyznaczonym slocie “header”. Powtarzając to podejście dla drugiego elementu " “, dostęp do slotu “footer” jest uzyskiwany poprzez przypisanie wartości atrybutu “slot” do wartości “footer”, tym samym renderując zawarty tekst w określonym slocie “footer”.

Zrozumienie przekazywania slotów

Przekazywanie slotów, aspekt frameworka Svelte, umożliwia przesyłanie danych z elementu nadrzędnego do elementu podrzędnego za pośrednictwem elementu pośredniczącego lub opakowującego. Funkcjonalność ta ułatwia przekazywanie informacji między rozłączonymi elementami i zapewnia elastyczność w zarządzaniu złożonymi interfejsami użytkownika.

Rozważmy proces implementacji przekazywania slotów w dynamicznym ekosystemie, w którym wymagane kroki obejmują utworzenie komponentu podrzędnego w następujący sposób:

 <main>
  This is the child component
  <slot name="message"></slot>
</main>

Następnie należy utworzyć komponent opakowujący:

 <script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

W tym fragmencie kodu predefiniowana zmienna etykiety jest wprowadzana do przekazywanego pakietu danych struktury interfejsu podrzędnego.

W komponencie nadrzędnym można włączyć powyższy fragment kodu, aby osiągnąć pożądaną funkcjonalność renderowania komponentu akordeonowego z rozszerzalną zawartością na podstawie danych dostarczonych za pośrednictwem rekwizytów. Pozwala to na dynamiczną i interaktywną interakcję użytkownika z komponentem akordeonu, zwiększając ogólne wrażenia użytkownika.

 <script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

Powyższa architektura ułatwia przesyłanie komunikatu “This is from the parent component”, który przechodzi przez komponent wrapper w drodze do odebrania go przez komponent child, wykorzystując slot wrapperMessage umieszczony w elemencie wrapper.

Ułatw sobie życie dzięki slotom Svelte

Sloty to wyjątkowy atrybut Svelte, który umożliwia tworzenie wysoce spersonalizowanych i wymiennych elementów. W tym kursie zostałeś wprowadzony do tworzenia podstawowych slotów, zidentyfikowanych slotów, wykorzystywania właściwości slotów i tak dalej.Dzięki zrozumieniu różnych odmian slotów i ich implementacji, można tworzyć adaptacyjne i wszechstronne projekty interfejsów użytkownika.