Jak korzystać ze slotów w Svelte

Svelte oferuje różne sposoby komunikacji między komponentami, w tym rekwizyty, gniazda itp. Będziesz musiał zintegrować gniazda, aby stworzyć elastyczne i nadające się do ponownego użycia komponenty w aplikacjach Svelte.

Zrozumienie automatów w Svelte

Sloty framework Svelte działać podobnie do sloty w Vue. Umożliwiają przekazywanie treści z komponentu nadrzędnego do komponentu podrzędnego. Za pomocą gniazd można zdefiniować elementy zastępcze w szablonie komponentu, do których można wstrzyknąć treść z komponentu nadrzędnego.

Treść ta może mieć postać zwykłego tekstu, znaczniki HTMLlub inne komponenty Svelte. Praca ze szczelinami umożliwia tworzenie wysoce konfigurowalnych i dynamicznych komponentów, które dostosowują się do różnych przypadków użycia.

Tworzenie podstawowego gniazda

Aby utworzyć slot w Svelte, użyj otwór element w szablonie komponentu. The

otwór element jest symbolem zastępczym treści przekazywanej z komponentu nadrzędnego. Domyślnie automat renderuje każdą przekazaną mu treść.

Oto przykład tworzenia podstawowego gniazda:

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

Powyższy blok kodu reprezentuje komponent podrzędny, który używa elementu slot do pobierania treści z komponentu nadrzędnego.

Aby przekazać treść z komponentu nadrzędnego do komponentu podrzędnego, należy najpierw zaimportować komponent podrzędny do komponentu nadrzędnego. Następnie zamiast używać znacznika samozamykającego do renderowania komponentu podrzędnego, użyj znacznika otwierającego i zamykającego. Na koniec w tagach komponentu wpisz treść, którą chcesz przekazać ze komponentu nadrzędnego do podrzędnego.

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 componentspan>
Component>
main>

Oprócz przekazywania treści z komponentów nadrzędnych do podrzędnych, w gniazdach można udostępnić zawartość zastępczą/domyślną. Ta treść będzie wyświetlana w gnieździe, jeśli komponent nadrzędny nie przekaże żadnej treści.

Oto jak możesz przekazać treść zastępczą:

<main>
 This is the child component
<slot>Fallback Contentslot>
main>

Ten blok kodu udostępnia tekst „Zawartość zastępcza” jako treść zastępczą, która będzie wyświetlana w boksie, jeśli komponent nadrzędny nie udostępnia żadnej treści.

Przekazywanie danych przez szczelinę za pomocą podpórek szczelinowych

Svelte pozwala na przekazywanie danych do slotów za pomocą rekwizytów slotów. Rekwizytów slotu używasz w sytuacjach, gdy chcesz przekazać dane z komponentu podrzędnego do treści, w którą się wpinasz.

Na przykład:

<script>
 let message = 'Hello Parent Component!'
script>
<main>
 This is the child component
<slotmessage={message}>slot>
main>

Powyższy blok kodu reprezentuje komponent Svelte. W ramach scenariusz tag, deklarujesz zmienną wiadomość i przypisz tekst „Hello Parent Component!” do tego. Przekazujesz także zmienną komunikatu do podpórki gniazda wiadomość. Dzięki temu dane wiadomości będą dostępne dla komponentu nadrzędnego, gdy wstawi on treść do tego gniazda.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

The niech: wiadomość składnia umożliwia komponentowi nadrzędnemu dostęp do wiadomość slot, który zapewnia komponent podrzędny. The div tagi wiadomość zmienna to dane z wiadomość podpora gniazda

Pamiętaj, że nie jesteś ograniczony do jednego rekwizytu slotu, możesz przekazać wiele rekwizytów slotu, jeśli zajdzie taka potrzeba:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

W komponencie nadrzędnym:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: firstNamelet: lastName>
<div>
 The user's name is {firstName} {lastName}
div>
Component>
main>

Praca z nazwanymi slotami

Możesz użyć nazwanych gniazd, jeśli chcesz przekazać wiele gniazd w swoich komponentach. Nazwane sloty ułatwiają zarządzanie różnymi slotami, ponieważ każdemu z nich możesz nadać unikalną nazwę. Dzięki nazwanym gniazdom można budować złożone komponenty o różnych układach.

Aby utworzyć nazwane miejsce, przekaż a nazwa podeprzyj do otwór element:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

W tym przykładzie istnieją dwa nazwane gniazda, gniazdo o nazwie nagłówek i gniazdo o nazwie stopka. Używając otwór prop, możesz przekazać zawartość do każdego slotu z komponentu nadrzędnego.

Na przykład:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Ten kod pokazuje, jak używać otwór prop, aby przekazać zawartość do nazwanych gniazd. Na początku Zakres tag, mijasz otwór prop z wartością nagłówek. Dzięki temu tekst w Zakres tag będzie renderowany w nagłówek otwór. Podobnie tekst w Zakres tag z otwór wartość rekwizytu stopka będzie renderowany w stopka otwór.

Zrozumienie przekazywania slotów

Przekazywanie szczelin to funkcja w Svelte, która umożliwia przekazywanie zawartości z komponentu nadrzędnego przez komponent opakowania do komponentu podrzędnego. Może to być bardzo przydatne w przypadkach, gdy chcesz przekazać treść z niepowiązanych komponentów.

Oto przykład użycia przekierowania slotów. Najpierw utwórz komponent potomny:

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

Następnie tworzysz komponent opakowania:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

W tym bloku kodu przekazujesz kolejne nazwane miejsce do wiadomość szczelina komponentu potomnego.

Następnie w komponencie nadrzędnym napisz następujący kod:

<script>
 import Wrapper from "./Wrapper.svelte";
script>
<main>
 This is the parent component
<Wrapper>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

W powyższej strukturze treść „To pochodzi z komponentu nadrzędnego” jest przekazywana przez komponent opakowujący i bezpośrednio do komponentu potomnego dzięki wiadomość w opakowaniu szczelina wewnątrz komponentu opakowania.

Ułatw sobie życie dzięki smukłym automatom

Sloty to potężna funkcja w Svelte, która pozwala tworzyć komponenty, które można w dużym stopniu dostosowywać i ponownie wykorzystywać. Nauczyłeś się, jak tworzyć podstawowe sloty, nazwane sloty, używać rekwizytów slotów itp. Rozumiejąc różne typy slotów i sposoby ich wykorzystania, możesz budować dynamiczne i elastyczne interfejsy użytkownika.