Kā lietot slotus Sveltē

Svelte piedāvā dažādus veidus, kā komponenti var sazināties savā starpā, tostarp rekvizīti, sloti utt. Lai savās Svelte lietojumprogrammās izveidotu elastīgus un atkārtoti lietojamus komponentus, jums būs jāintegrē sloti.

Izpratne par slotiem Sveltē

Iespraudiet Svelte ietvars strādāt līdzīgi kā slots Vue. Tie nodrošina veidu, kā saturu pārsūtīt no vecāka uz bērnu komponentu. Izmantojot slotus, komponenta veidnē varat definēt vietturus, kuros var ievadīt saturu no vecākkomponenta.

Šis saturs var būt vienkāršs teksts, HTML marķējums, vai citas Svelte sastāvdaļas. Darbs ar slotiem ļauj izveidot ļoti pielāgojamus un dinamiskus komponentus, kas pielāgojas dažādiem lietošanas gadījumiem.

Pamata slota izveide

Lai izveidotu slotu Svelte, izmantojiet slots elements komponenta veidnē. The slots elements ir vietturis saturam, kuru pārsūtīsit no vecākkomponenta. Pēc noklusējuma slots atveidos visu tai nodoto saturu.

Šeit ir piemērs, kā izveidot pamata slotu:

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

Iepriekš minētais koda bloks attēlo pakārtoto komponentu, kas izmanto slota elementu, lai iegūtu saturu no vecākkomponenta.

Lai pārsūtītu saturu no vecākkomponenta uz pakārtoto komponentu, vispirms ir jāimportē pakārtotais komponents vecākkomponentā. Pēc tam tā vietā, lai izmantotu pašaizverošu tagu, lai renderētu pakārtoto komponentu, izmantojiet sākuma un aizvēršanas tagu. Visbeidzot komponenta tagos ierakstiet saturu, kuru vēlaties pārsūtīt no komponenta no vecākiem uz bērnu.

Piemēram:

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

Papildus satura pārsūtīšanai no vecākiem-bērniem komponentiem varat nodrošināt atkāpšanās/noklusējuma saturu slotos. Šis saturs ir tas, ko slots parādīs, ja vecākais komponents neiztur nekādu saturu.

Tālāk ir norādīts, kā varat nodot rezerves saturu.

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

Šis koda bloks nodrošina tekstu “Atkāpšanās saturs” kā atkāpšanās saturu slotam, kas jāparāda, ja vecākais komponents nenodrošina saturu.

Datu nodošana pa slotu ar slota balstiem

Svelte ļauj nodot datus slotiem, izmantojot slotu balstus. Slotu rekvizītus izmantojat situācijās, kad vēlaties nodot dažus datus no pakārtotā komponenta saturam, kurā ievietojat.

Piemēram:

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

Iepriekš minētais koda bloks apzīmē Svelte komponentu. Ietvaros skripts tagu, jūs deklarējat mainīgo ziņa un piešķiriet tekstu "Hello Parent Component!" uz to. Jūs arī nododat ziņojuma mainīgo slota atbalstam ziņa. Tas padara ziņojuma datus pieejamus vecākkomponentam, kad tas ievada saturu šajā 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 let: ziņa sintakse ļauj vecākajam komponentam piekļūt ziņa slota balsts, ko nodrošina bērna komponents. The div tagus ziņa mainīgais ir dati no ziņa slota prop.

Ņemiet vērā, ka jūs neaprobežojaties ar vienu slota balstu, jūs varat nodot vairākus slota balstus pēc vajadzības:

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

Vecākā komponentā:

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

Darbs ar nosauktajiem slotiem

Varat izmantot nosauktos slotus, ja vēlaties nodot vairākus slotus savos komponentos. Nosauktie sloti atvieglo dažādu slotu pārvaldību, jo katram slotam var piešķirt unikālu nosaukumu. Izmantojot nosauktos slotus, varat izveidot sarežģītus komponentus ar dažādiem izkārtojumiem.

Lai izveidotu nosauktu slotu, nododiet a nosaukums balsts uz slots elements:

<div>
 This is the child component

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

Šajā piemērā ir divi nosaukti sloti, slots nosaukts galvene un slots nosaukts kājene. Izmantojot slots prop, varat nodot saturu katram slotam no vecākkomponenta.

Piemēram:

<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 kods parāda, kā jūs izmantojat slots rekvizītu, lai nodotu saturu nosauktajiem slotiem. Pirmajā span tagu, jūs izturat slots rekvizīti ar vērtību galvene. Tas nodrošina, ka teksts span tags tiks renderēts galvene slots. Līdzīgi teksts iekšpusē span atzīmējiet ar slots rekvizīta vērtība kājene atveidos iekšā kājene slots.

Izpratne par slotu pārsūtīšanu

Slotu pārsūtīšana ir Svelte funkcija, kas ļauj pārsūtīt saturu no vecākkomponenta caur iesaiņojuma komponentu uz pakārtoto komponentu. Tas var būt ļoti noderīgi gadījumos, kad vēlaties nodot saturu no nesaistītiem komponentiem.

Šeit ir piemērs, kā izmantot slotu pārsūtīšanu, vispirms izveidojiet pakārtoto komponentu:

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

Pēc tam izveidojiet iesaiņojuma komponentu:

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

Šajā koda blokā jūs ievadāt citu ar nosaukumu slotu ziņa bērna komponenta slots.

Pēc tam vecākkomponentā ierakstiet šo kodu:

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

Iepriekš minētajā struktūrā saturs “Tas ir no vecākkomponenta” tiek nodots caur iesaiņojuma komponentu un tieši pakārtotajā komponentā, pateicoties wrapperMessage sprauga iesaiņojuma sastāvdaļas iekšpusē.

Padariet savu dzīvi vieglāku, izmantojot Svelte slots

Sloti ir jaudīga Svelte funkcija, kas ļauj izveidot ļoti pielāgojamus un atkārtoti lietojamus komponentus. Jūs esat iemācījušies izveidot pamata slotus, nosaukt slotus, izmantot slotu rekvizītus utt. Izprotot dažādus slotu veidus un to izmantošanu, varat izveidot dinamiskas un elastīgas lietotāja saskarnes.