Kuidas kasutada Svelte teenindusaegu

Svelte pakub komponentidele üksteisega suhtlemiseks erinevaid viise, sealhulgas rekvisiite, pesasid jne. Peate integreerima pesad, et luua oma Svelte rakendustes paindlikke ja korduvkasutatavaid komponente.

Svelte teenindusaegade mõistmine

Teeb sisse Svelte raamistik töötada sarnaselt teenindusajad Vues. Need pakuvad võimalust sisu edastamiseks vanemalt alamkomponendile. Slotside abil saate määratleda komponendi mallis kohahoidjaid, kuhu saate sisestada sisu ülemkomponendist.

See sisu võib olla lihttekst, HTML märgistusvõi muid Svelte komponente. Slotidega töötamine võimaldab teil luua väga kohandatavaid ja dünaamilisi komponente, mis kohanduvad erinevate kasutusjuhtumitega.

Põhipesa loomine

Sveltes pesa loomiseks kasutage pesa element komponendi mallis. The pesa element on ülemkomponendist edastatava sisu kohatäide. Vaikimisi renderdab pesa kogu sellele edastatud sisu.

Siin on näide põhipesa loomisest:

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

Ülaltoodud koodiplokk esindab alamkomponenti, mis kasutab põhikomponendist sisu hankimiseks pesa elementi.

Sisu ülekandmiseks ülemkomponendist alamkomponendile importige esmalt alamkomponent ülemkomponendisse. Seejärel kasutage alamkomponendi renderdamiseks isesulguva sildi asemel ava- ja sulgemärgendit. Lõpuks kirjutage komponendi siltide sisse sisu, mida soovite vanemalt lapsele komponendist edasi anda.

Näiteks:

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

Lisaks sisu edastamisele vanematelt-lapsele komponentidest saate pesades pakkuda varu-/vaikesisu. See sisu on see, mida pesa kuvab, kui põhikomponent sisu ei edasta.

Varusisu edastamiseks tehke järgmist.

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

See koodiplokk pakub teksti „Varusisu” pesas kuvatava varusisuna, kui emakomponent sisu ei paku.

Andmete edastamine pesa kaudu pesa rekvisiidiga

Svelte võimaldab teil andmeid pesadesse edastada, kasutades pesa rekvisiite. Kasutate pesa rekvisiite olukordades, kus soovite edastada osa andmeid alamkomponendist sisusse, millesse sisestate.

Näiteks:

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

Ülaltoodud koodiplokk esindab Svelte'i komponenti. Piirkonnas stsenaarium tag, deklareerite muutuja sõnum ja määrake tekst "Tere vanemkomponent!" sellele. Samuti edastate sõnumimuutuja pesa propele sõnum. See muudab sõnumi andmed kättesaadavaks emakomponendile, kui see sisestab sellesse pessa sisu.

<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 anna: sõnum süntaks võimaldab ülemkomponendil juurdepääsu sõnum pesa tugi, mida alamkomponent pakub. The div sildid sõnum muutuja on andmed alates sõnum pilu prop.

Pange tähele, et te ei piirdu ainult ühe pesa rekvisiidiga, saate vastavalt vajadusele läbida mitu pesa rekvisiite:

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

Emakomponendis:

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

Nimetatud teenindusaegadega töötamine

Saate kasutada nimega pesasid, kui soovite oma komponentides edastada mitu pesa. Nimega pesad muudavad erinevate pesade haldamise lihtsamaks, kuna saate anda igale pesale kordumatu nime. Nimetatud pesade abil saate koostada keerukaid komponente erineva paigutusega.

Nimega pesa loomiseks edastage a nimi toetada pesa element:

<div>
 This is the child component

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

Selles näites on kaks nimega pesa, pesa nimega päis ja pesa nimega jalus. Kasutades pesa prop, saate edastada sisu igasse pessa põhikomponendist.

Näiteks:

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

See kood näitab, kuidas te kasutate pesa rekvisiidid sisu edastamiseks nimega pesadesse. Esimesel ulatus märgi, siis läbite pesa väärtus päis. See tagab, et tekst sees ulatus silt renderdatakse päis pesa. Samamoodi teksti sees ulatus märgistage pesa rekvisiidi väärtus jalus renderdab jalus pesa.

Piltide edastamise mõistmine

Pesade edastamine on Svelte'i funktsioon, mis võimaldab edastada sisu ülemkomponendist läbi ümbriskomponendi alamkomponendiks. See võib olla väga kasulik juhtudel, kui soovite edastada sisu mitteseotud komponentidest.

Siin on näide pesa suunamise kasutamisest, esmalt looge alamkomponent:

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

Järgmisena loote ümbrise komponendi:

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

Selles koodiplokis edastate teise nimega pesa sõnum alamkomponendi pesa.

Seejärel kirjutage emakomponendis see kood:

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

Ülaltoodud struktuuris edastatakse sisu "See on põhikomponendist" tänu ümbriskomponendile otse alamkomponendisse. wrapperMessage pilu ümbrise komponendi sees.

Muutke oma elu õhukeste teenindusaegadega lihtsamaks

Pesad on Svelte'i võimas funktsioon, mis võimaldab teil luua väga kohandatavaid ja korduvkasutatavaid komponente. Olete õppinud, kuidas luua põhilisi pesasid, nimetada pesasid, kasutada pesa rekvisiite jne. Mõistes eri tüüpi teenindusaegu ja nende kasutamist, saate luua dünaamilisi ja paindlikke kasutajaliideseid.