Jak používat sloty ve Svelte

Svelte nabízí různé způsoby vzájemné komunikace komponent, včetně podpěr, slotů atd. Budete muset integrovat sloty, abyste vytvořili flexibilní a opakovaně použitelné komponenty ve vašich aplikacích Svelte.

Pochopení slotů ve Svelte

Sloty v rámec Svelte pracovat podobně jako sloty ve Vue. Poskytují způsob, jak předávat obsah z nadřazené do podřízené komponenty. Pomocí slotů můžete definovat zástupné symboly v šabloně komponenty, kam můžete vložit obsah z nadřazené komponenty.

Tento obsah může být prostý text, HTML značenínebo jiné komponenty Svelte. Práce se sloty vám umožňuje vytvářet vysoce přizpůsobitelné a dynamické komponenty, které se přizpůsobí různým případům použití.

Vytvoření základního slotu

Chcete-li vytvořit slot v Svelte, použijte slot prvek v šabloně komponenty. The slot element je zástupný symbol pro obsah, který předáte z nadřazené komponenty. Ve výchozím nastavení slot vykreslí veškerý obsah, který mu byl předán.

Zde je příklad, jak vytvořit základní slot:

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

Blok kódu výše představuje podřízenou komponentu, která používá prvek slotu k získání obsahu z nadřazené komponenty.

Chcete-li předat obsah z nadřazené komponenty do podřízené komponenty, nejprve importujte podřízenou komponentu do nadřazené komponenty. Potom místo použití samouzavírací značky k vykreslení podřízené komponenty použijte otevírací a uzavírací značku. Nakonec do tagů komponenty napište obsah, který chcete předat z rodičovské komponenty.

Například:

<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>

Kromě předávání obsahu z komponent rodič-dítě můžete ve slotech poskytnout záložní/výchozí obsah. Tento obsah je to, co slot zobrazí, pokud nadřazená komponenta nepředává žádný obsah.

Takto můžete předat záložní obsah:

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

Tento blok kódu poskytuje text „Záložní obsah“ jako záložní obsah pro blok, který se zobrazí, pokud nadřazená komponenta neposkytuje žádný obsah.

Předávání dat přes slot s podpěrami slotu

Svelte vám umožňuje předávat data do slotů pomocí slotových rekvizit. Podpěry slotů používáte v situacích, kdy chcete předat některá data z podřízené komponenty obsahu, do kterého vkládáte sloty.

Například:

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

Výše uvedený blok kódu představuje komponentu Svelte. V rámci skript tag, deklarujete proměnnou zpráva a přiřaďte text "Hello Parent Component!" k tomu. Proměnnou message také předáte podpěře slotu zpráva. To zpřístupní data zprávy nadřazené komponentě, když vloží obsah do tohoto slotu.

<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 nechat: zprávu syntaxe umožňuje nadřazené komponentě přístup k zpráva podpěra slotu, kterou poskytuje podřízená komponenta. The div značky zpráva proměnná jsou data z zpráva slot prop.

Všimněte si, že nejste omezeni na jednu podpěru slotu, podle potřeby můžete předat více podpěr slotu:

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

V nadřazené komponentě:

<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>

Práce s pojmenovanými sloty

Pojmenované sloty můžete použít, když chcete ve svých komponentách projít více sloty. Pojmenované sloty usnadňují správu různých slotů, protože každému slotu můžete dát jedinečný název. S pojmenovanými sloty můžete stavět složité komponenty s různým rozvržením.

Chcete-li vytvořit pojmenovaný slot, předejte a název podpěra k slot živel:

<div>
 This is the child component

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

V tomto příkladu jsou dva pojmenované sloty, slot s názvem záhlaví a slot pojmenovaný zápatí. Za použití slot prop, můžete předávat obsah do každého slotu z nadřazené komponenty.

Například:

<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>

Tento kód ukazuje, jak používáte slot prop předat obsah do pojmenovaných slotů. Zaprvé rozpětí tag, předáte slot rekvizita s hodnotou záhlaví. Tím je zajištěno, že text v rozpětí tag se vykreslí v záhlaví slot. Podobně text v rozpětí značka s slot hodnotu rekvizity zápatí vykreslí se v zápatí slot.

Porozumění přesměrování slotů

Předávání slotů je funkce v Svelte, která vám umožňuje předávat obsah z nadřazené komponenty přes komponentu wrapper do podřízené komponenty. To může být velmi užitečné v případech, kdy chcete předávat obsah z nesouvisejících komponent.

Zde je příklad, jak používat předávání slotů, nejprve vytvořte podřízenou komponentu:

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

Dále vytvoříte komponentu wrapper:

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

V tomto bloku kódu předáváte další pojmenovaný slot do zpráva slotu podřízené komponenty.

Poté do nadřazené komponenty napište tento kód:

<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>

Ve výše uvedené struktuře je obsah „Toto je z nadřazené komponenty“ předán komponentou wrapper a přímo do podřízené komponenty díky wrapperMessage štěrbina uvnitř součásti obalu.

Usnadněte si život pomocí štíhlých slotů

Sloty jsou výkonnou funkcí ve Svelte, která vám umožňuje vytvářet vysoce přizpůsobitelné a opakovaně použitelné komponenty. Naučili jste se vytvářet základní sloty, pojmenované sloty, používat sloty atd. Pochopením různých typů slotů a jejich používání můžete vytvářet dynamická a flexibilní uživatelská rozhraní.