Kaip naudoti lizdus Svelte

„Svelte“ siūlo skirtingus būdus, kaip komponentai bendrauti tarpusavyje, įskaitant rekvizitus, lizdus ir kt. Turėsite integruoti lizdus, ​​kad sukurtumėte lanksčius ir daugkartinio naudojimo komponentus savo Svelte programose.

Svelte laiko tarpsnių supratimas

Įkišama Svelte karkasas dirbti panašiai kaip laiko tarpsniai Vue. Jie suteikia galimybę perduoti turinį iš tėvų į vaikų komponentą. Naudodami tarpsnius, komponento šablone galite apibrėžti vietos rezervavimo ženklus, kuriuose galite įterpti turinį iš pirminio komponento.

Šis turinys gali būti paprastas tekstas, HTML žymėjimas, ar kitus Svelte komponentus. Dirbdami su lizdais galite sukurti labai pritaikomus ir dinamiškus komponentus, kurie prisitaiko prie skirtingų naudojimo atvejų.

Pagrindinio lizdo sukūrimas

Norėdami sukurti lizdą Svelte, naudokite lizdas elementas komponento šablone. The lizdas elementas yra turinio, kurį perduosite iš pirminio komponento, rezervuota vieta. Pagal numatytuosius nustatymus lizdas pateiks visą jai perduotą turinį.

Štai pavyzdys, kaip sukurti pagrindinį lizdą:

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

Aukščiau pateiktas kodo blokas reiškia antrinį komponentą, kuris naudoja lizdo elementą, kad gautų turinį iš pirminio komponento.

Norėdami perduoti turinį iš pirminio komponento antriniam komponentui, pirmiausia importuosite antrinį komponentą į pagrindinį komponentą. Tada, užuot naudoję savaime užsidarančią žymą antriniam komponentui pateikti, naudokite atidarymo ir uždarymo žymas. Galiausiai komponento žymose parašykite turinį, kurį norite perduoti iš tėvų vaikui.

Pavyzdžiui:

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

Galite ne tik perduoti turinį iš tėvų vaikui, bet ir pateikti atsarginį / numatytąjį turinį lizduose. Šis turinys bus rodomas lizde, jei pagrindinis komponentas neperduos jokio turinio.

Štai kaip galite perduoti atsarginį turinį:

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

Šiame kodo bloke pateikiamas tekstas „Atsarginis turinys“ kaip atsarginis turinys, skirtas vietai rodyti, jei pirminis komponentas nepateikia jokio turinio.

Duomenų perdavimas per lizdą naudojant lizdų rekvizitus

Svelte leidžia perduoti duomenis į lizdus naudojant lizdų rekvizitus. Lizdų rekvizitus naudojate tais atvejais, kai norite perduoti kai kuriuos duomenis iš antrinio komponento į turinį, į kurį įtraukite.

Pavyzdžiui:

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

Aukščiau pateiktas kodo blokas reiškia „Svelte“ komponentą. Per scenarijus žymą, deklaruojate kintamąjį žinutę ir priskirkite tekstą „Sveiki Parent Component! prie jo. Taip pat perduodate pranešimo kintamąjį lizdo rekvizitui žinutę. Taip pranešimo duomenys bus prieinami pirminiam komponentui, kai jis įveda turinį į šį lizdą.

<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 tegul: žinutė sintaksė leidžia pagrindiniam komponentui pasiekti žinutę lizdo atrama, kurią suteikia antrinis komponentas. The div žymės žinutę kintamasis yra duomenys iš žinutę lizdo atrama.

Atminkite, kad jūs neapsiribojate vienu lizdo rekvizitu, galite perduoti kelis lizdus, ​​jei reikia:

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

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

Darbas su pavadintais lizdais

Galite naudoti pavadintus lizdus, ​​kai norite perduoti kelis savo komponentų lizdus. Vardiniai lizdai palengvina įvairių laiko tarpsnių valdymą, nes kiekvienam lizdui galite suteikti unikalų pavadinimą. Naudodami vardinius lizdus galite sukurti sudėtingus komponentus su įvairiais išdėstymais.

Norėdami sukurti pavadintą lizdą, perduokite a vardas atrama prie lizdas elementas:

<div>
 This is the child component

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

Šiame pavyzdyje yra du pavadinti lizdai, lizdas pavadintas antraštę ir lizdas pavadintas poraštė. Naudojant lizdas prop, galite perduoti turinį į kiekvieną lizdą iš pirminio komponento.

Pavyzdžiui:

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

Šis kodas parodo, kaip naudojate lizdas rekvizitas, skirtas perduoti turinį į pavadintus lizdus. Pirmajame span žymą, jūs išlaikote lizdas rekvizitas su verte antraštę. Tai užtikrina, kad tekstas span žyma bus pateikta antraštę lizdas. Panašiai tekstas viduje span pažymėkite su lizdas rekvizito vertė poraštė pateiks į poraštė lizdas.

Lizdų persiuntimo supratimas

Lizdų persiuntimas yra „Svelte“ funkcija, leidžianti perduoti turinį iš pirminio komponento per paketo komponentą į antrinį komponentą. Tai gali būti labai naudinga tais atvejais, kai norite perduoti turinį iš nesusijusių komponentų.

Štai pavyzdys, kaip naudoti lizdo persiuntimą, pirmiausia sukurkite antrinį komponentą:

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

Tada sukuriate įvyniojimo komponentą:

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

Šiame kodo bloke jūs perduodate kitą pavadintą lizdą į žinutę antrinio komponento lizdas.

Tada pirminiame komponente parašykite šį kodą:

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

Aukščiau pateiktoje struktūroje turinys „Tai yra iš pirminio komponento“ perduodamas per paketo komponentą ir tiesiai į antrinį komponentą dėl wrapperMessage lizdas vyniotuvo komponento viduje.

Palengvinkite savo gyvenimą naudodami plonus lizdus

Lizdai yra galinga „Svelte“ funkcija, leidžianti sukurti lengvai pritaikomus ir daugkartinio naudojimo komponentus. Išmokote sukurti pagrindinius lizdus, ​​pavadinti lizdus, ​​naudoti lizdų rekvizitus ir kt. Suprasdami skirtingus laiko tarpsnių tipus ir kaip juos naudoti, galite sukurti dinamiškas ir lanksčias vartotojo sąsajas.