Ako používať sloty v Svelte

Svelte ponúka rôzne spôsoby vzájomnej komunikácie komponentov, vrátane rekvizít, slotov atď. Budete musieť integrovať sloty, aby ste vytvorili flexibilné a opakovane použiteľné komponenty vo vašich aplikáciách Svelte.

Pochopenie automatov v Svelte

Sloty v rámec Svelte pracovať podobne ako sloty vo Vue. Poskytujú spôsob, ako odovzdať obsah z nadradeného do podriadeného komponentu. Pomocou slotov môžete v šablóne komponentu definovať zástupné symboly, do ktorých môžete vložiť obsah z nadradeného komponentu.

Tento obsah môže byť obyčajný text, HTML značkyalebo iné komponenty Svelte. Práca so slotmi vám umožňuje vytvárať vysoko prispôsobiteľné a dynamické komponenty, ktoré sa prispôsobujú rôznym prípadom použitia.

Vytvorenie základného slotu

Ak chcete vytvoriť slot v Svelte, použite slot prvok v šablóne komponentu. The slot element je zástupný symbol pre obsah, ktorý odošlete z nadradeného komponentu. V predvolenom nastavení slot vykreslí všetok obsah, ktorý mu bol odovzdaný.

Tu je príklad, ako vytvoriť základný slot:

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

Vyššie uvedený blok kódu predstavuje podradený komponent, ktorý používa prvok slotu na získanie obsahu z nadradeného komponentu.

Ak chcete odovzdať obsah z nadradeného komponentu do podriadeného komponentu, najprv naimportujte podriadený komponent do nadradeného komponentu. Potom namiesto použitia samozatváracej značky na vykreslenie podradeného komponentu použite otváraciu a uzatváraciu značku. Nakoniec do značiek komponentu napíšte obsah, ktorý chcete odovzdať z komponentu rodič-potom.

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

Okrem odovzdávania obsahu z komponentov rodič-dieťa môžete v slotoch poskytnúť záložný/predvolený obsah. Tento obsah je to, čo slot zobrazí, ak nadradený komponent neprechádza žiadnym obsahom.

Záložný obsah môžete odovzdať takto:

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

Tento blok kódu poskytuje text „Záložný obsah“ ako záložný obsah pre priestor, ktorý sa zobrazí, ak nadradený komponent neposkytuje žiadny obsah.

Odovzdávanie dát cez slot s podperami slotu

Svelte vám umožňuje prenášať dáta do slotov pomocou slotových rekvizít. Podpery slotov používate v situáciách, keď chcete odovzdať niektoré údaje z podradeného komponentu obsahu, do ktorého vkladáte.

Napríklad:

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

Vyššie uvedený blok kódu predstavuje komponent Svelte. V rámci skript tag, deklarujete premennú správu a priraďte text "Ahoj nadradený komponent!" k tomu. Premennú správy tiež odovzdáte podperu slotu správu. To sprístupní údaje správy nadradenému komponentu, keď vloží obsah do tohto 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 nech: správa syntax umožňuje rodičovskému komponentu prístup k správu štrbinová podpera, ktorú poskytuje detský komponent. The div značky správu premenná sú údaje z správu štrbinová podpera.

Všimnite si, že nie ste obmedzený na jednu rekvizitu slotu, podľa potreby môžete odovzdať viacero rekvizít slotu:

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

V nadradenom komponente:

<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áca s menovanými slotmi

Pomenované sloty môžete použiť, keď chcete prejsť viacerými slotmi vo vašich komponentoch. Pomenované sloty uľahčujú správu rôznych slotov, pretože každému slotu môžete dať jedinečný názov. Pomocou pomenovaných slotov môžete vytvárať zložité komponenty s rôznym rozložením.

Ak chcete vytvoriť pomenovaný slot, prejdite a názov podpera k slot element:

<div>
 This is the child component

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

V tomto príklade sú dva pomenované sloty, slot s názvom hlavička a slot s názvom päta. Pomocou slot prop, môžete odovzdať obsah do každého slotu z nadradeného komponentu.

Naprí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, ako používate slot prop na odovzdávanie obsahu do pomenovaných slotov. V prvom rozpätie tag, miniete slot rekvizita s hodnotou hlavička. Tým sa zabezpečí, že text v rámci rozpätie tag sa vykreslí v hlavička slot. Podobne aj text v rozpätie tag s slot hodnotu rekvizity päta vykreslí sa v päta slot.

Pochopenie preposielania slotov

Preposielanie slotov je funkcia v Svelte, ktorá vám umožňuje preniesť obsah z nadradeného komponentu cez komponent wrapper do podriadeného komponentu. To môže byť veľmi užitočné v prípadoch, keď chcete odovzdať obsah z nesúvisiacich komponentov.

Tu je príklad, ako používať presmerovanie slotov, najprv vytvorte podradený komponent:

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

Ďalej vytvoríte komponent obalu:

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

V tomto bloku kódu odovzdávate ďalší pomenovaný slot do správu slot detského komponentu.

Potom do nadradeného komponentu napíš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>

Vo vyššie uvedenej štruktúre sa obsah „Toto je z nadradeného komponentu“ prenesie cez komponent obalu a priamo do podriadeného komponentu vďaka wrapperMessage štrbina vo vnútri komponentu obalu.

Uľahčite si život pomocou štíhlych slotov

Sloty sú výkonnou funkciou v Svelte, ktorá vám umožňuje vytvárať vysoko prispôsobiteľné a opakovane použiteľné komponenty. Naučili ste sa vytvárať základné sloty, pomenované sloty, používať rekvizity slotov atď. Pochopením rôznych typov slotov a ich používania môžete vytvárať dynamické a flexibilné používateľské rozhrania.