Svelte oferă diferite moduri prin care componentele pot comunica între ele, inclusiv elemente de recuzită, sloturi etc. Va trebui să integrați sloturi pentru a crea componente flexibile și reutilizabile în aplicațiile dvs. Svelte.
Cuprins
Înțelegerea sloturilor în Svelte
Sloturile din cadrul Svelte funcționează în mod similar cu sloturile din Vue. Ele oferă o modalitate de a transmite conținut de la o componentă părinte la o componentă copil. Cu sloturi, puteți defini substituenți în șablonul unei componente în care puteți injecta conținut dintr-o componentă părinte.
Acest conținut poate fi text simplu, markup HTML sau alte componente Svelte. Lucrul cu sloturi vă permite să creați componente extrem de personalizabile și dinamice, care se adaptează la diferite cazuri de utilizare.
Crearea unui slot de bază
Pentru a crea un slot în Svelte, utilizați elementul slot din șablonul unei componente. Elementul slot este un substituent pentru conținutul pe care îl veți transmite din componenta părinte. În mod implicit, slotul va reda orice conținut transmis acestuia.
Iată un exemplu despre cum să creați un slot de bază:
<main>
This is the child component
<slot></slot>
</main>
Blocul de cod de mai sus reprezintă o componentă copil care utilizează elementul slot pentru a obține conținut de la o componentă părinte.
Pentru a trece conținut de la o componentă părinte la o componentă copil, mai întâi veți importa componenta copil în componenta părinte. Apoi, în loc să utilizați o etichetă cu auto-închidere pentru a reda componenta copil, utilizați o etichetă de deschidere și de închidere. În cele din urmă, în etichetele componentei, scrieți conținutul pe care doriți să îl transmiteți de la componenta de la părinte la copil.
De exemplu:
<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>
Pe lângă transmiterea conținutului de la componentele de la părinte la copil, puteți oferi conținut alternativ/implicit în sloturi. Acest conținut este ceea ce slotul va afișa dacă componenta părinte nu trece niciun conținut.
Iată cum puteți transmite un conținut alternativ:
<main>
This is the child component
<slot>Fallback Content</slot>
</main>
Acest bloc de cod oferă textul „Conținut alternativ” ca conținut alternativ pentru afișarea slotului dacă componenta părinte nu oferă niciun conținut.
Trecerea datelor peste slot cu elemente de sprijin pentru slot
Svelte vă permite să treceți date la sloturi folosind suporturi pentru sloturi. Folosiți elementele de recuzită pentru sloturi în situațiile în care doriți să transmiteți unele date de la componenta copil către conținutul în care introduceți.
De exemplu:
<script>
let message="Hello Parent Component!"
</script><main>
This is the child component
<slot message={message}></slot>
</main>
Blocul de cod de mai sus reprezintă o componentă Svelte. În cadrul etichetei de script, declarați mesajul variabil și atribuiți textul „Hello Parent Component!” la el. De asemenea, treceți variabila mesaj către mesajul prop slot. Acest lucru face ca datele mesajului să fie disponibile pentru componenta părinte atunci când injectează conținut în acest slot.
<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>
Sintaxa let:message permite componentei părinte să acceseze suportul pentru slotul de mesaje pe care îl oferă componenta copil. Variabila de mesaj a etichetei div este datele din prop slotul pentru mesaje.
Rețineți că nu sunteți limitat la un singur suport de slot, puteți trece mai multe elemente de recuzită după cum este necesar:
<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script><main>
This is the child component
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
În componenta părinte:
<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>
Lucrul cu sloturi numite
Puteți utiliza sloturi numite atunci când doriți să treceți mai multe sloturi în componentele dvs. Sloturile denumite facilitează gestionarea diferitelor sloturi, deoarece puteți da fiecărui slot un nume unic. Cu sloturi numite, puteți construi componente complexe cu aspecte diferite.
Pentru a crea un slot denumit, transmiteți o prop de nume elementului slot:
<div>
This is the child component
<p>Header: <slot name="header"></slot></p>
<p>Footer: <slot name="footer"></slot></p>
</div>
În acest exemplu, există două sloturi numite, slotul numit antet și slotul numit subsol. Folosind suportul slotului, puteți transmite conținut la fiecare slot din componenta părinte.
De exemplu:
<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>
Acest cod demonstrează modul în care utilizați suportul pentru sloturi pentru a transmite conținut către sloturile numite. În prima etichetă span, treceți prop slotul cu antetul valorii. Acest lucru asigură că textul din eticheta span va fi redat în slotul antetului. În mod similar, textul din eticheta span cu subsolul valorii suportului de slot va fi redat în slotul de subsol.
Înțelegerea redirecționării sloturilor
Slot forwarding este o caracteristică din Svelte care vă permite să treceți conținut de la o componentă părinte printr-o componentă wrapper într-o componentă secundară. Acest lucru poate fi foarte util în cazurile în care doriți să transmiteți conținut din componente care nu au legătură.
Iată un exemplu despre cum să utilizați redirecționarea sloturilor, creați mai întâi componenta copil:
<main>
This is the child component
<slot name="message"></slot>
</main>
Apoi, creați componenta wrapper:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
În acest bloc de cod, treceți un alt slot numit în slotul de mesaje al componentei copil.
Apoi, în componenta părinte, scrieți acest cod:
<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>
În structura de mai sus, conținutul „Acesta este din componenta părinte” este trecut prin componenta wrapper și direct în componenta fii, datorită slotului wrapperMessage din interiorul componentei wrapper.
Ușurează-ți viața cu sloturi Svelte
Sloturile sunt o caracteristică puternică în Svelte care vă permite să creați componente extrem de personalizabile și reutilizabile. Ați învățat cum să creați sloturi de bază, sloturi denumite, să folosiți suporturi pentru sloturi etc. Înțelegând diferitele tipuri de sloturi și cum să le utilizați, puteți construi interfețe de utilizator dinamice și flexibile.