Kako koristiti automate u Svelteu

Svelte nudi različite načine za međusobno komuniciranje komponenti, uključujući rekvizite, utore itd. Morat ćete integrirati utore za stvaranje fleksibilnih komponenti koje se mogu ponovno koristiti u vašim Svelte aplikacijama.

Razumijevanje automata u Svelteu

Utori okvir Svelte raditi slično kao utora u Vue. Oni pružaju način za prijenos sadržaja od nadređene do podređene komponente. S utorima možete definirati rezervirana mjesta unutar predloška komponente gdje možete umetnuti sadržaj iz nadređene komponente.

Ovaj sadržaj može biti običan tekst, HTML označavanje, ili druge Svelte komponente. Rad s utorima omogućuje vam stvaranje vrlo prilagodljivih i dinamičnih komponenti koje se prilagođavaju različitim slučajevima upotrebe.

Stvaranje osnovnog utora

Da biste stvorili utor u Svelteu, koristite utor element unutar predloška komponente. The utor element je rezervirano mjesto za sadržaj koji ćete proslijediti iz nadređene komponente. Prema zadanim postavkama, utor će prikazati svaki sadržaj koji mu se proslijedi.

Evo primjera kako stvoriti osnovni utor:

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

Gore navedeni blok koda predstavlja podređenu komponentu koja koristi element utora za dobivanje sadržaja od nadređene komponente.

Da biste proslijedili sadržaj od nadređene komponente do podređene komponente, prvo ćete uvesti podređenu komponentu u nadređenu komponentu. Zatim, umjesto da koristite samozatvarajuću oznaku za prikaz podređene komponente, upotrijebite oznaku za otvaranje i zatvaranje. Na kraju, unutar oznaka komponente, napišite sadržaj koji želite prenijeti s komponente roditelja na dijete.

Na primjer:

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

Osim prosljeđivanja sadržaja iz komponenti roditelj-dijete, možete osigurati pomoćni/zadani sadržaj u utorima. Ovaj sadržaj je ono što će utor prikazati ako nadređena komponenta ne proslijedi nikakav sadržaj.

Evo kako možete proslijediti rezervni sadržaj:

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

Ovaj blok koda daje tekst "Rezervni sadržaj" kao rezervni sadržaj za prikaz utora ako nadređena komponenta ne pruža nikakav sadržaj.

Prijenos podataka preko utora s propsima utora

Svelte vam omogućuje prijenos podataka u utore pomoću rekvizita utora. Koristite rekvizite utora u situacijama kada želite prenijeti neke podatke iz podređene komponente u sadržaj u koji ubacujete.

Na primjer:

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

Gornji blok koda predstavlja Svelte komponentu. Unutar skripta oznaku, deklarirate varijablu poruka i dodijelite tekst "Hello Parent Component!" na to. Također prosljeđujete varijablu poruke proporcu utora poruka. To čini podatke o poruci dostupnima nadređenoj komponenti kada ubacuje sadržaj u ovaj utor.

<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 neka: poruka sintaksa dopušta nadređenoj komponenti pristup poruka slot prop koji pruža podređena komponenta. The div oznake poruka varijabla je podatak iz poruka prorez za proreze

Imajte na umu da niste ograničeni na jedan rekvizit utora, možete proslijediti više rekvizita utora prema potrebi:

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

U nadređenoj 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>

Rad s imenovanim utorima

Možete koristiti imenovane utore kada želite proslijediti više utora u svojim komponentama. Imenovani utori olakšavaju upravljanje raznim utorima jer svakom utoru možete dati jedinstveno ime. S imenovanim utorima možete graditi složene komponente s različitim izgledima.

Da biste stvorili imenovani utor, proslijedite a Ime oslonac za utor element:

<div>
 This is the child component

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

U ovom primjeru, postoje dva imenovana utora, utor pod nazivom Zaglavlje i utor imenovan podnožje. Koristiti utor prop, možete proslijediti sadržaj svakom utoru iz nadređene komponente.

Na primjer:

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

Ovaj kod pokazuje kako koristite utor prop za prosljeđivanje sadržaja u imenovane utore. U prvoj raspon oznaku, prolazite utor prop s vrijednošću Zaglavlje. Time se osigurava da tekst unutar raspon oznaka će se prikazati u Zaglavlje utor. Slično tome, tekst unutar raspon označite s utor vrijednost rekvizita podnožje prikazat će se u podnožje utor.

Razumijevanje prosljeđivanja utora

Prosljeđivanje utora značajka je u Svelteu koja vam omogućuje prosljeđivanje sadržaja iz nadređene komponente kroz komponentu omotača u podređenu komponentu. Ovo može biti vrlo korisno u slučajevima kada želite proslijediti sadržaj iz nepovezanih komponenti.

Evo primjera kako koristiti prosljeđivanje utora, prvo stvorite podređenu komponentu:

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

Zatim kreirate komponentu omotača:

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

U ovom bloku koda prosljeđujete drugi imenovani utor u poruka utor komponente djeteta.

Zatim u nadređenoj komponenti napišite ovaj 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>

U gornjoj strukturi, sadržaj "Ovo je iz nadređene komponente" prolazi kroz omotnu komponentu i izravno u podređenu komponentu zahvaljujući wrapperMessage utor unutar komponente omotača.

Olakšajte si život uz Svelte automate

Utori su moćna značajka u Svelteu koja vam omogućuje stvaranje vrlo prilagodljivih komponenti koje se mogu ponovno koristiti. Naučili ste kako stvoriti osnovne utore, imenovane utore, koristiti rekvizite utora itd. Razumijevajući različite vrste utora i kako ih koristiti, možete izgraditi dinamična i fleksibilna korisnička sučelja.