Svelte-kolikkopelien käyttäminen

Svelte tarjoaa komponenteille erilaisia ​​tapoja kommunikoida keskenään, mukaan lukien rekvisiitta, slotit jne. Sinun on integroitava korttipaikkoja luodaksesi joustavia ja uudelleenkäytettäviä komponentteja Svelte-sovelluksissasi.

Kolikkopelien ymmärtäminen Sveltessä

Slot sisään Svelte-kehys toimivat samalla tavalla kuin paikkaa Vuessa. Ne tarjoavat tavan siirtää sisältöä vanhemmalta alikomponentille. Paikkoja käytettäessä voit määrittää komponentin malliin paikkamerkit, joihin voit lisätä sisältöä pääkomponentista.

Tämä sisältö voi olla pelkkää tekstiä, HTML-merkintätai muita Svelten komponentteja. Työskentely slottien kanssa mahdollistaa erittäin muokattavien ja dynaamisten komponenttien luomisen, jotka mukautuvat erilaisiin käyttötapauksiin.

Peruspaikan luominen

Luo paikka Svelteen käyttämällä aukko elementti komponentin mallissa. The aukko elementti on paikkamerkki sisällölle, jonka siirrät pääkomponentista. Oletusarvoisesti paikka renderöi kaiken sille välitetyn sisällön.

Tässä on esimerkki peruspaikan luomisesta:

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

Yllä oleva koodilohko edustaa alikomponenttia, joka käyttää paikkaelementtiä sisällön hakemiseen pääkomponentista.

Jos haluat siirtää sisältöä pääkomponentista alakomponenttiin, tuo ensin alakomponentti yläkomponenttiin. Sen sijaan, että käyttäisit itsesulkeutuvaa tunnistetta alikomponentin hahmontamiseen, käytä avaus- ja sulkemistunnistetta. Kirjoita lopuksi komponentin tunnisteisiin sisältö, jonka haluat siirtää vanhemmalta lapselle -komponentista.

Esimerkiksi:

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

Sen lisäksi, että välität sisällön vanhemmalta lapselle -komponenteista, voit tarjota vara-/oletussisältöä paikoissa. Tämä sisältö on se, mitä paikka näyttää, jos pääkomponentti ei välitä mitään sisältöä.

Näin voit välittää varasisällön:

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

Tämä koodilohko tarjoaa tekstin "Varasisältö" varasisältönä paikkaa varten, joka näytetään, jos pääkomponentti ei tarjoa sisältöä.

Tietojen välittäminen paikan poikki paikkarekvisiittäin

Svelten avulla voit välittää dataa lähtöpaikkoihin käyttämällä paikkarekvisiittaa. Käytät paikkarekvisiittaa tilanteissa, joissa haluat välittää tietoja lapsikomponentista sisältöön, johon olet lisännyt.

Esimerkiksi:

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

Yllä oleva koodilohko edustaa Svelte-komponenttia. Sisällä käsikirjoitus tag, ilmoitat muuttujan viesti ja määritä teksti "Hello Parent Component!" siihen. Välität myös viestimuuttujan korttipaikan potkuriin viesti. Tämä asettaa viestitiedot pääkomponentin saataville, kun se lisää sisältöä tähän paikkaan.

<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 anna: viesti syntaksin avulla pääkomponentti voi käyttää viesti lapsikomponentin tarjoama aukkotuki. The div tagit viesti muuttuja on tiedot kohteesta viesti slot prop.

Huomaa, että et ole rajoittunut yhteen paikkaan, voit välittää useita korttipaikkoja tarpeen mukaan:

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

Pääkomponentissa:

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

Työskentely nimettyjen slottien kanssa

Voit käyttää nimettyjä paikkoja, kun haluat välittää useita paikkoja komponenteissasi. Nimetyt paikat helpottavat eri paikkojen hallintaa, koska voit antaa kullekin paikalle yksilöllisen nimen. Nimettyjen korttipaikkojen avulla voit rakentaa monimutkaisia ​​komponentteja erilaisilla asetteluilla.

Luo nimetty paikka syöttämällä a nimi tuki siihen aukko elementti:

<div>
 This is the child component

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

Tässä esimerkissä on kaksi nimettyä paikkaa, paikka nimeltä otsikko ja paikka nimeltä alatunniste. Käyttämällä aukko prop, voit siirtää sisältöä jokaiseen paikkaan pääkomponentista.

Esimerkiksi:

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

Tämä koodi näyttää, kuinka käytät aukko ehdotus sisällön välittämiseksi nimettyihin paikkoihin. Ensimmäisessä jänneväli tag, ohitat aukko tuki arvon kanssa otsikko. Tämä varmistaa, että teksti sisällä jänneväli -tunniste renderöityy otsikko aukko. Samoin tekstin sisällä jänneväli tagi kanssa aukko rekvisiitin arvo alatunniste renderöi alatunniste aukko.

Slot Forwardingin ymmärtäminen

Slot-välitys on Svelten ominaisuus, jonka avulla voit siirtää sisältöä pääkomponentista käärekomponentin kautta alikomponenttiin. Tämä voi olla erittäin hyödyllistä tapauksissa, joissa haluat välittää sisältöä asiaankuulumattomista komponenteista.

Tässä on esimerkki paikan uudelleenohjauksen käyttämisestä. Luo ensin alikomponentti:

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

Seuraavaksi luot käärekomponentin:

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

Tässä koodilohkossa siirrät toisen nimetyn paikan sisään viesti lapsikomponentin paikka.

Kirjoita sitten pääkomponenttiin tämä koodi:

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

Yllä olevassa rakenteessa sisältö "Tämä on pääkomponentista" välitetään käärekomponentin läpi ja suoraan alakomponenttiin. wrapperMessage aukko kääreosan sisällä.

Tee elämästäsi helpompaa hoikkaiden kolikkopelien avulla

Slotit ovat Svelten tehokas ominaisuus, jonka avulla voit luoda helposti muokattavia ja uudelleenkäytettäviä komponentteja. Olet oppinut luomaan peruspaikkoja, nimettyjä slotteja, käyttämään slot-rekvisiittaa jne. Ymmärtämällä erityyppiset slotit ja kuinka niitä käytetään, voit rakentaa dynaamisia ja joustavia käyttöliittymiä.