Hogyan használjuk a slotokat a Svelte-ben

A Svelte különféle módokat kínál az összetevők egymás közötti kommunikációjára, beleértve a kellékeket, bővítőhelyeket stb. Svelte alkalmazásaiban rugalmas és újrafelhasználható komponensek létrehozásához nyílásokat kell integrálnia.

A nyerőgépek megértése a Svelte-ben

Behelyezhető a Svelte keret hasonlóan működnek slot a Vue-ban. Módot biztosítanak a tartalom átadására a szülőtől a gyermek összetevőhöz. A résekkel helyőrzőket határozhat meg az összetevő sablonján belül, ahol tartalmat szúrhat be egy szülőkomponensből.

Ez a tartalom lehet egyszerű szöveg, HTML jelölés, vagy más Svelte alkatrészeket. A slotokkal való munka lehetővé teszi, hogy nagymértékben testreszabható és dinamikus komponenseket hozzon létre, amelyek alkalmazkodnak a különböző felhasználási esetekhez.

Basic Slot létrehozása

Egy slot létrehozásához a Svelte-ben használja a

rés elemet az összetevő sablonjában. A rés elem a szülőkomponensből átadandó tartalom helyőrzője. Alapértelmezés szerint a slot minden neki átadott tartalmat megjelenít.

Íme egy példa az alap slot létrehozására:

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

A fenti kódblokk egy olyan gyermekkomponenst jelöl, amely a slot elemet használja a tartalom lekérésére a szülőkomponenstől.

Ha tartalmat szeretne átadni egy szülőkomponensből egy alárendelt összetevőnek, először importálja az alárendelt összetevőt a szülőkomponensbe. Ezután ahelyett, hogy önzáró címkét használna az utódkomponens megjelenítéséhez, használjon nyitó és záró címkét. Végül az összetevő címkéibe írja be azt a tartalmat, amelyet át szeretne adni a szülő-gyermek összetevőből.

Például:

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

Amellett, hogy tartalmat továbbít a szülő-gyermek összetevők között, tartalék/alapértelmezett tartalmat is megadhat a helyeken. Ez a tartalom az, amit a slot megjelenít, ha a szülőkomponens nem ad át semmilyen tartalmat.

A következőképpen adhat át tartalék tartalmat:

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

Ez a kódblokk a „Tartaléktartalom” szöveget biztosítja tartalék tartalomként a hely számára, amely akkor jelenik meg, ha a szülőkomponens nem biztosít tartalmat.

Adatok továbbítása a nyílások között slot kellékekkel

A Svelte lehetővé teszi az adatok továbbítását a nyílásokhoz a slot kellékek segítségével. A helytámaszokat olyan helyzetekben használja, amikor bizonyos adatokat szeretne átadni a gyermekkomponensből a behelyezett tartalomnak.

Például:

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

A fenti kódblokk egy Svelte komponenst képvisel. Belül forgatókönyv tag, akkor deklarálod a változót üzenet és rendelje hozzá a "Hello Parent Component!" hozzá. Az üzenetváltozót is átadja a slot propnak üzenet. Ez elérhetővé teszi az üzenetadatokat a szülőkomponens számára, amikor tartalmat szúr be ebbe a nyílásba.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

A hadd: üzenet szintaxisa lehetővé teszi, hogy a szülőkomponens hozzáférjen a üzenet nyílástámasz, amelyet a gyermekkomponens biztosít. A div címkék üzenet változó a üzenet slot prop.

Ne feledje, hogy Ön nem korlátozódik egyetlen slot támaszra, szükség szerint több nyílástámaszt is átadhat:

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

A szülő komponensben:

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

Munka elnevezett slotokkal

Használhat elnevezett réseket, ha több helyet szeretne átadni az összetevőkben. Az elnevezett slotok megkönnyítik a különféle slotok kezelését, mivel minden egyes slotnak egyedi nevet adhatunk. Az elnevezett nyílásokkal összetett, változó elrendezésű összetevőket készíthet.

Egy elnevezett slot létrehozásához adja át a név támasz a rés elem:

<div>
 This is the child component

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

Ebben a példában két elnevezett slot van, a slot neve fejléc és a nevezett slot lábléc. Használni a rés prop, átadhat tartalmat az egyes helyekre a szülőkomponensből.

Például:

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

Ez a kód bemutatja, hogyan használja a rés prop a tartalom átadásához a megnevezett helyekre. Az elsőben span címke, átadja a rés kellék az értékkel fejléc. Ez biztosítja, hogy a szöveg a span címke a fejléc rés. Hasonlóképpen a szöveg a span címkével a rés kellék értéke lábléc a lábléc rés.

A Slot Forwarding megértése

A réstovábbítás a Svelte egy olyan funkciója, amely lehetővé teszi, hogy tartalmat továbbítson a szülőkomponensből egy burkolókomponensen keresztül a gyermekkomponensbe. Ez nagyon hasznos lehet olyan esetekben, amikor nem kapcsolódó összetevőkből kíván tartalmat átadni.

Íme egy példa a helytovábbítás használatára, először hozza létre a gyermekkomponenst:

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

Ezután hozza létre a burkoló komponenst:

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

Ebben a kódblokkban egy másik elnevezett nyílást ad át a üzenet a gyermekkomponens nyílása.

Ezután a szülőkomponensbe írja be ezt a kódot:

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

A fenti struktúrában az „Ez a szülőkomponensből származik” tartalom átkerül a burkolókomponensen és közvetlenül a gyermekkomponensbe, köszönhetően a wrapperMessage nyílás a csomagolóelem belsejében.

Tegye könnyebbé életét a karcsú nyerőgépekkel

A bővítőhelyek a Svelte hatékony funkciója, amely lehetővé teszi, hogy nagymértékben testreszabható és újrafelhasználható összetevőket hozzon létre. Megtanulta az alap slotok létrehozását, a slotok elnevezését, a slot kellékek használatát stb. A különböző típusú slotok és azok használatának megértésével dinamikus és rugalmas felhasználói felületeket hozhat létre.