Kako uporabljati igralne avtomate v Svelte

Svelte ponuja različne načine za medsebojno komunikacijo komponent, vključno s pripomočki, režami itd. Za ustvarjanje prilagodljivih komponent za večkratno uporabo v aplikacijah Svelte boste morali integrirati reže.

Razumevanje igralnih avtomatov v Svelte

Reže v ogrodje Svelte delujejo podobno kot reže v Vue. Zagotavljajo način za prenos vsebine od nadrejene do podrejene komponente. Z režami lahko določite ogradne oznake znotraj predloge komponente, kamor lahko vstavite vsebino iz nadrejene komponente.

Ta vsebina je lahko navadno besedilo, HTML oznaka, ali druge komponente Svelte. Delo z režami vam omogoča ustvarjanje zelo prilagodljivih in dinamičnih komponent, ki se prilagajajo različnim primerom uporabe.

Ustvarjanje osnovne reže

Če želite ustvariti režo v Svelte, uporabite reža element znotraj predloge komponente. The reža element je ograda za vsebino, ki jo boste posredovali iz nadrejene komponente. Reža bo privzeto upodobila kakršno koli vsebino, ki ji je bila posredovana.

Tukaj je primer, kako ustvariti osnovno režo:

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

Zgornji blok kode predstavlja podrejeno komponento, ki uporablja element reže za pridobivanje vsebine od nadrejene komponente.

Če želite prenesti vsebino iz nadrejene komponente v podrejeno komponento, morate najprej uvoziti podrejeno komponento v nadrejeno komponento. Nato namesto samozapiralne oznake za upodabljanje podrejene komponente uporabite odpiralno in zapiralno oznako. Na koncu v oznake komponente vpišite vsebino, ki jo želite prenesti iz komponente od starša do otroka.

Na primer:

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

Poleg posredovanja vsebine iz komponent od starša do otroka lahko zagotovite nadomestno/privzeto vsebino v režah. To vsebino bo prikazala reža, če nadrejena komponenta ne posreduje nobene vsebine.

Tukaj je, kako lahko posredujete nadomestno vsebino:

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

Ta blok kode zagotavlja besedilo »Nadomestna vsebina« kot nadomestno vsebino za režo za prikaz, če nadrejena komponenta ne zagotavlja nobene vsebine.

Posredovanje podatkov čez režo s pripomočki za režo

Svelte vam omogoča prenos podatkov v reže z uporabo rekvizitov za reže. Rekvizite reže uporabljate v primerih, ko želite posredovati nekaj podatkov iz podrejene komponente v vsebino, v katero vstavljate.

Na primer:

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

Zgornji blok kode predstavlja komponento Svelte. Znotraj scenarij oznako, spremenljivko deklarirate sporočilo in dodelite besedilo "Hello Parent Component!" temu. Spremenljivko sporočila posredujete tudi prop reži sporočilo. S tem so podatki sporočila na voljo nadrejeni komponenti, ko v to režo vstavi vsebino.

<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 naj: sporočilo sintaksa omogoča nadrejeni komponenti dostop do sporočilo podpornik reže, ki ga nudi podrejena komponenta. The div oznake sporočilo spremenljivka je podatek iz sporočilo režni prop.

Upoštevajte, da niste omejeni na eno samo režo, po potrebi lahko posredujete več rekvizitov:

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

V nadrejeni komponenti:

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

Delo z imenovanimi režami

Poimenovane reže lahko uporabite, če želite posredovati več rež v svojih komponentah. Poimenovane reže olajšajo upravljanje različnih rež, saj lahko vsaki reži daste edinstveno ime. Z imenovanimi režami lahko sestavite kompleksne komponente z različnimi postavitvami.

Če želite ustvariti imenovano režo, podajte a ime prop na reža element:

<div>
 This is the child component

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

V tem primeru sta dve imenovani reži, reža imenovana glava in imenovana reža noga. Uporabljati reža prop, lahko posredujete vsebino v vsako režo iz nadrejene komponente.

Na primer:

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

Ta koda prikazuje, kako uporabljate reža prop za posredovanje vsebine v imenovane reže. V prvem razpon oznako, prenesete reža prop z vrednostjo glava. To zagotavlja, da je besedilo znotraj razpon bo upodobljena v glava reža. Podobno besedilo znotraj razpon označite z reža vrednost rekvizita noga bo upodobljen v noga reža.

Razumevanje posredovanja rež

Posredovanje reže je funkcija v Svelteju, ki vam omogoča prenos vsebine iz nadrejene komponente prek ovojne komponente v podrejeno komponento. To je lahko zelo koristno v primerih, ko želite posredovati vsebino iz nepovezanih komponent.

Tukaj je primer, kako uporabiti posredovanje reže, najprej ustvarite podrejeno komponento:

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

Nato ustvarite ovojno komponento:

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

V tem bloku kode posredujete drugo imenovano režo v sporočilo režo podrejene komponente.

Nato v nadrejeno komponento zapišite to kodo:

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

V zgornji strukturi se vsebina »To je iz nadrejene komponente« prenese skozi ovojno komponento in neposredno v podrejeno komponento zahvaljujoč wrapperMessage režo znotraj ovojne komponente.

Olajšajte si življenje z igralnimi avtomati Svelte

Reže so zmogljiva funkcija v Svelte, ki vam omogoča ustvarjanje zelo prilagodljivih in večkrat uporabnih komponent. Naučili ste se ustvariti osnovne slote, poimenovane slote, uporabljati pripomočke za reže itd. Z razumevanjem različnih vrst slotov in njihove uporabe lahko zgradite dinamične in prilagodljive uporabniške vmesnike.