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 ve frameworku Svelte fungují 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, značky HTML 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 prvek slotu v šabloně komponenty. Prvek slotu 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 component</span>
</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 Content</slot>
</main>

Tento blok kódu poskytuje text „Záložní obsah“ jako záložní obsah pro slot, 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
  <slot message={message}></slot>
</main>
 

Výše uvedený blok kódu představuje komponentu Svelte. Ve značce skriptu deklarujete proměnnou zprávu a přiřadíte text „Hello Parent Component!“ k tomu. Proměnnou message také předáte zprávě prop. 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
<Component let:message>
<div>
The child component says {message}
</div>
</Component>
</main>
 

Syntaxe let:message umožňuje nadřazené komponentě přistupovat k podpěře slotu zpráv, kterou poskytuje podřízená komponenta. Proměnná zprávy tagu div jsou data z podpěry slotu zpráv.

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
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
 

V nadřazené komponentě:

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

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 prvku slotu prop názvu:

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

V tomto příkladu jsou dva pojmenované sloty, slot s názvem záhlaví a slot s názvem zápatí. Pomocí podpěry slotu 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>
<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>
 

Tento kód ukazuje, jak používáte podpěru slotu k předávání obsahu do pojmenovaných slotů. V prvním span tagu předáte podpěru slotu s hlavičkou hodnoty. Tím je zajištěno, že text ve značce span se vykreslí ve slotu záhlaví. Podobně se text ve značce span s patičkou hodnoty prop vykreslí v patičce.

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
  <slot name="message"></slot>
</main>

Dále vytvoříte komponentu wrapper:

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

V tomto bloku kódu předáváte další pojmenovaný slot do slotu zpráv 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>
<div slot="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 slotu wrapperMessage uvnitř komponenty wrapper.

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žití můžete vytvářet dynamická a flexibilní uživatelská rozhraní.