Svelte nabízí celou řadu mechanismů pro interakci mezi komponentami, včetně props, slotů a dalších. Pro vytvoření flexibilních a opakovaně použitelných komponent ve vašich aplikacích Svelte je nezbytné umět efektivně využívat sloty.
Porozumění slotům v Svelte
Sloty v Svelte fungují podobně jako ve Vue. Umožňují předávat obsah z rodičovské komponenty do komponenty potomka. V šabloně komponenty můžete definovat zástupné symboly, do kterých se pak vkládá obsah z rodičovské komponenty.
Tento obsah může zahrnovat prostý text, HTML značky, nebo i další Svelte komponenty. Práce se sloty vám umožňuje konstruovat vysoce přizpůsobitelné a dynamické komponenty, které lze použít v různých situacích.
Vytvoření základního slotu
Pro vytvoření slotu v Svelte použijte prvek `
Zde je příklad vytvoření základního slotu:
<main>
Toto je podřízená komponenta
<slot></slot>
</main>
Výše uvedený kód definuje podřízenou komponentu, která používá prvek `
Pro předání obsahu z rodičovské do podřízené komponenty nejprve importujte podřízenou komponentu do rodičovské. Následně místo samouzavírací značky pro vykreslení podřízené komponenty použijte otevírací a uzavírací značku. Mezi tyto tagy vložte obsah, který chcete předat z rodičovské komponenty.
Například:
<script>
import Komponenta from "./Komponenta.svelte";
</script><main>
Toto je rodičovská komponenta
<Komponenta>
<span>Toto je zpráva od rodičovské komponenty</span>
</Komponenta>
</main>
Kromě předávání obsahu můžete pro sloty definovat i náhradní/výchozí obsah. Ten se zobrazí v případě, že rodičovská komponenta nepředá žádný obsah.
Takto můžete definovat náhradní obsah:
<main>
Toto je podřízená komponenta
<slot>Náhradní obsah</slot>
</main>
Tento kód definuje text „Náhradní obsah“ jako výchozí obsah slotu, který se zobrazí, pokud rodičovská komponenta neposkytne žádný jiný obsah.
Předávání dat pomocí slot props
Svelte umožňuje předávat data do slotů pomocí slot props. Slot props se používají v případech, kdy chcete z podřízené komponenty předat data obsahu, který vkládáte do slotu.
Například:
<script>
let zpráva="Ahoj rodičovská komponento!"
</script><main>
Toto je podřízená komponenta
<slot zpráva={zpráva}></slot>
</main>
Uvedený kód definuje Svelte komponentu. Ve skriptové části je deklarována proměnná `zpráva` s přiřazeným textem „Ahoj rodičovská komponento!“. Tato proměnná je předána slotu jako prop `zpráva`. Tím se zpřístupní data zprávy pro rodičovskou komponentu, pokud vloží obsah do tohoto slotu.
<script>
import Komponenta from "./Komponenta.svelte";
</script><main>
Toto je rodičovská komponenta
<Komponenta let:zpráva>
<div>
Podřízená komponenta říká: {zpráva}
</div>
</Komponenta>
</main>
Syntaxe `let:zpráva` umožňuje rodičovské komponentě získat přístup k slot prop `zpráva` poskytované podřízenou komponentou. Proměnná `zpráva` v tagu `div` představuje data z slot prop `zpráva`.
Nezapomeňte, že nejste omezeni na jedinou slot prop, dle potřeby jich můžete předávat více:
<script>
let uživatel = {
jméno: 'Jan',
příjmení: 'Novák'
};
</script><main>
Toto je podřízená komponenta
<slot jméno={uživatel.jméno} příjmení={uživatel.příjmení}></slot>
</main>
V rodičovské komponentě:
<script>
import Komponenta from "./Komponenta.svelte";
</script><main>
Toto je rodičovská komponenta
<Komponenta let:jméno let:příjmení>
<div>
Jméno uživatele je: {jméno} {příjmení}
</div>
</Komponenta>
</main>
Práce s pojmenovanými sloty
Pojmenované sloty se používají, pokud chcete ve svých komponentách používat více slotů. Umožňují lépe spravovat různé sloty, protože každému slotu můžete přiřadit jedinečný název. S pojmenovanými sloty můžete konstruovat komplexní komponenty s různým rozvržením.
Pro vytvoření pojmenovaného slotu použijte prop `name` v elementu slot:
<div>
Toto je podřízená komponenta
<p>Hlavička: <slot name="hlavička"></slot></p>
<p>Patička: <slot name="patička"></slot></p>
</div>
V tomto příkladu jsou definovány dva pojmenované sloty: slot s názvem `hlavička` a slot s názvem `patička`. Pomocí slot props můžete do každého slotu předávat obsah z rodičovské komponenty.
Například:
<script>
import Komponenta from "./Komponenta.svelte";
</script><main>
Toto je rodičovská komponenta
<Komponenta>
<span slot="hlavička">Toto bude předáno do slotu hlavičky</span>
<span slot="patička">Toto bude předáno do slotu patičky</span>
</Komponenta>
</main>
Tento kód ukazuje, jak pomocí prop `slot` předávat obsah do pojmenovaných slotů. V prvním span tagu použijete prop `slot` s hodnotou `hlavička`. Tím zajistíte, že text ve span tagu bude vykreslen ve slotu `hlavička`. Podobně text ve span tagu s prop `slot` o hodnotě `patička` bude vykreslen ve slotu `patička`.
Porozumění předávání slotů
Předávání slotů je funkce v Svelte, která umožňuje předávat obsah z rodičovské komponenty přes komponentu obálku do podřízené komponenty. To může být velmi užitečné v případech, kdy chcete předávat obsah mezi nesouvisejícími komponentami.
Zde je příklad, jak použít předávání slotů. Nejprve vytvořte podřízenou komponentu:
<main>
Toto je podřízená komponenta
<slot name="zpráva"></slot>
</main>
Dále vytvoříte komponentu obálku:
<script>
import Komponenta from "./Komponenta.svelte";
</script><main>
<Komponenta>
<div slot="zpráva">
<slot name="zprávaObálky"></slot>
</div>
</Komponenta>
</main>
V tomto kódu předáváte další pojmenovaný slot do slotu `zpráva` podřízené komponenty.
Poté do rodičovské komponenty vložte tento kód:
<script>
import Obálka from "./Obálka.svelte";
</script><main>
Toto je rodičovská komponenta
<Obálka>
<div slot="zprávaObálky">
Toto je z rodičovské komponenty
</div>
</Obálka>
</main>
V této struktuře se obsah „Toto je z rodičovské komponenty“ předává přes komponentu obálku a přímo do podřízené komponenty díky slotu `zprávaObálky` uvnitř komponenty obálky.
Usnadněte si práci s Svelte sloty
Sloty jsou mocnou funkcí v Svelte, která umožňuje vytvářet vysoce přizpůsobitelné a opakovaně použitelné komponenty. Naučili jste se, jak vytvářet základní sloty, pojmenované sloty, používat slot props a předávání slotů. Pochopením různých typů slotů a jejich použití můžete vytvářet dynamická a flexibilní uživatelská rozhraní.