Svelte nudi raznovrsne metode za komunikaciju među komponentama, uključujući propse, slotove i druge. Za izradu fleksibilnih i višekratno upotrebljivih komponenti u vašim Svelte aplikacijama, neophodno je razumeti i primeniti slotove.
Razumevanje slotova u Svelteu
Slotovi u Svelte frameworku funkcionišu na sličan način kao i slotovi u Vue. Oni pružaju mehanizam za prenos sadržaja iz roditeljske ka podređenoj komponenti. Korišćenjem slotova, definišete rezervna mesta unutar šablona komponente, gde se kasnije može ubaciti sadržaj iz nadređene komponente.
Ovaj sadržaj može biti običan tekst, HTML elementi ili čak druge Svelte komponente. Rad sa slotovima omogućava izradu vrlo prilagodljivih i dinamičnih komponenti koje se mogu prilagoditi različitim situacijama i potrebama.
Kreiranje osnovnog slota
Za kreiranje slota u Svelteu, koristite element slot unutar šablona komponente. Ovaj element služi kao čuvar mesta za sadržaj koji se prenosi iz nadređene komponente. Po defaultu, slot će prikazati sav sadržaj koji mu je prosleđen.
Evo primera kreiranja osnovnog slota:
<main>
Ovo je podređena komponenta
<slot></slot>
</main>
Gornji blok koda predstavlja podređenu komponentu koja koristi element slot za primanje sadržaja od roditeljske komponente.
Da biste preneli sadržaj iz roditeljske na podređenu komponentu, najpre uvezite podređenu komponentu u roditeljsku. Zatim, umesto da koristite samozatvarajuću oznaku za prikaz podređene komponente, koristite oznaku za otvaranje i zatvaranje. Konačno, unutar oznaka komponente, upišite sadržaj koji želite da prosledite iz roditeljske u podređenu komponentu.
Na primer:
<script>
import Component from "./Component.svelte";
</script><main>
Ovo je roditeljska komponenta
<Component>
<span>Ovo je poruka iz roditeljske komponente</span>
</Component>
</main>
Pored slanja sadržaja iz roditeljske komponente u podređenu, možete obezbediti i rezervni/podrazumevani sadržaj unutar slotova. Ovaj sadržaj će se prikazati ukoliko roditeljska komponenta ne prosledi nikakav sadržaj.
Evo kako možete proslediti rezervni sadržaj:
<main>
Ovo je podređena komponenta
<slot>Podrazumevani sadržaj</slot>
</main>
Ovaj blok koda obezbeđuje tekst „Podrazumevani sadržaj“ kao rezervni sadržaj za prikaz u slotu ako roditeljska komponenta ne pruži nikakav sadržaj.
Prenos podataka kroz slotove sa props-ima
Svelte omogućava prenos podataka u slotove korišćenjem slot props-a. Props za slot se koristi u situacijama kada želite da prosledite podatke iz podređene komponente u sadržaj koji se ubacuje u slot.
Na primer:
<script>
let message="Zdravo roditeljska komponento!"
</script><main>
Ovo je podređena komponenta
<slot message={message}></slot>
</main>
Gornji blok koda predstavlja Svelte komponentu. Unutar script oznake, deklariše se promenljiva message i dodeljuje joj se tekst „Zdravo roditeljska komponento!“. Takođe, promenljiva message se prosleđuje kao prop slota. Ovo omogućava da podaci iz message budu dostupni roditeljskoj komponenti kada ona ubacuje sadržaj u ovaj slot.
<script>
import Component from "./Component.svelte";
</script><main>
Ovo je roditeljska komponenta
<Component let:message>
<div>
Podređena komponenta kaže: {message}
</div>
</Component>
</main>
Sintaksa let:message omogućava roditeljskoj komponenti pristup propu message koji obezbeđuje podređena komponenta. Promenljiva message u div elementu su podaci iz propa slota message.
Niste ograničeni samo na jedan prop slota, već možete proslediti više slot props-a po potrebi:
<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script><main>
Ovo je podređena komponenta
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
U roditeljskoj komponenti:
<script>
import Component from "./Component.svelte";
</script><main>
Ovo je roditeljska komponenta
<Component let:firstName let:lastName>
<div>
Korisnik se zove {firstName} {lastName}
</div>
</Component>
</main>
Rad sa imenovanim slotovima
Imenovane slotove možete koristiti kada želite da prosledite više slotova u vašim komponentama. Imenovani slotovi olakšavaju upravljanje različitim slotovima, jer svakom slotu možete dodeliti jedinstveno ime. Sa imenovanim slotovima, moguće je kreirati složene komponente sa različitim rasporedima.
Za kreiranje imenovanog slota, prosledite name prop elementu slot:
<div>
Ovo je podređena komponenta
<p>Zaglavlje: <slot name="header"></slot></p>
<p>Podnožje: <slot name="footer"></slot></p>
</div>
U ovom primeru, postoje dva imenovana slota, slot sa imenom „header“ i slot sa imenom „footer“. Korišćenjem slot propa, možete proslediti sadržaj u svaki slot iz roditeljske komponente.
Na primer:
<script>
import Component from "./Component.svelte";
</script><main>
Ovo je roditeljska komponenta
<Component>
<span slot="header">Ovo će biti prosleđeno slotu zaglavlja</span>
<span slot="footer">Ovo će biti prosleđeno slotu podnožja</span>
</Component>
</main>
Ovaj kod prikazuje kako koristiti slot prop za prosleđivanje sadržaja imenovanim slotovima. U prvoj span oznaci, prosleđuje se slot prop sa vrednošću „header“. Ovo osigurava da će se tekst unutar ove oznake prikazati u slotu zaglavlja. Slično, tekst unutar span oznake sa vrednošću „footer“ će se prikazati u slotu podnožja.
Razumevanje prosleđivanja slotova
Prosleđivanje slotova je funkcija u Svelteu koja omogućava prenos sadržaja iz nadređene komponente kroz komponentu omotač u podređenu komponentu. Ovo može biti vrlo korisno kada želite preneti sadržaj iz nepovezanih komponenti.
Evo primera kako koristiti prosleđivanje slotova. Prvo, kreirajte podređenu komponentu:
<main>
Ovo je podređena komponenta
<slot name="message"></slot>
</main>
Zatim, kreirajte komponentu omotač:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
U ovom bloku koda, prosleđuje se drugi imenovani slot u slot poruke podređene komponente.
Zatim, u roditeljskoj komponenti, upišite sledeći kod:
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
Ovo je roditeljska komponenta
<Wrapper>
<div slot="wrapperMessage">
Ovo je iz roditeljske komponente
</div>
</Wrapper>
</main>
U gore navedenoj strukturi, sadržaj „Ovo je iz roditeljske komponente“ prolazi kroz komponentu omotač i direktno u podređenu komponentu zahvaljujući slotu wrapperMessage unutar komponente omotač.
Olakšajte svoj posao sa Svelte slotovima
Slotovi su moćna funkcija u Svelteu koja omogućava kreiranje vrlo prilagodljivih i višekratno upotrebljivih komponenti. Naučili ste kako kreirati osnovne slotove, imenovane slotove, koristiti slot props, itd. Razumevanjem različitih tipova slotova i njihovom pravilnom upotrebom, možete izgraditi dinamične i fleksibilne korisničke interfejse.