Cum să utilizați sloturile în Svelte

Svelte oferă diferite moduri prin care componentele pot comunica între ele, inclusiv recuzită, sloturi etc. Va trebui să integrați sloturi pentru a crea componente flexibile și reutilizabile în aplicațiile dvs. Svelte.

Înțelegerea sloturilor în Svelte

Slot in cadrul svelt lucrează în mod similar cu sloturi în 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, Marcaj 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 slot element din șablonul unei componente. The

slot elementul este un substituent pentru conținutul pe care îl veți transmite de la 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 componentspan>
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 Contentslot>
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
<slotmessage={message}>slot>
main>

Blocul de cod de mai sus reprezintă o componentă Svelte. În cadrul scenariu tag, declarați variabila mesaj și atribuiți textul „Hello Parent Component!” la el. De asemenea, treceți variabila mesaj către suportul slotului mesaj. 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
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

The lasa: mesaj sintaxa permite componentei părinte să acceseze mesaj slot prop pe care o oferă componenta copil. The div Etichete mesaj variabila sunt datele din mesaj slot prop.

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

În componenta părinte:

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

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 numit, treceți a Nume prop la slot element:

<div>
 This is the child component

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

În acest exemplu, există două sloturi numite, slotul numit antet și slotul numit subsol. Folosind slot prop, puteți trece conținut în fiecare slot din componenta părinte.

De exemplu:

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

Acest cod demonstrează cum utilizați slot prop pentru a transmite conținut la sloturi numite. In primul span eticheta, treci slot prop cu valoarea antet. Acest lucru asigură că textul din span eticheta va fi redată în antet slot. În mod similar, textul din span eticheta cu slot valoarea recuzită subsol va reda în subsol slot.

Î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
<slotname="message">slot>
main>

Apoi, creați componenta wrapper:

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

În acest bloc de cod, treceți un alt slot numit în mesaj slot 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>
<divslot="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ă wrapperMessage fantă din interiorul componentei de ambalare.

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 numite, să folosiți elemente de recuzită pentru sloturi etc. Înțelegând diferitele tipuri de sloturi și cum să le folosiți, puteți construi interfețe de utilizator dinamice și flexibile.