Sveltejs Academy · Oppitunti

Snippettien välittäminen propseina

Vastaanottakaa snippet-arvoja propseina erittäin joustavien komponentti-API:en rakentamiseksi.

Oppitunti 3/413 vaihetta

Snippettien välittäminen propseina on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Snippet propina

Snippetit voidaan välittää lapsikomponenteille muiden arvojen tavoin.

Määrittäminen ja välittäminen

Määritä snippet sisäisesti vanhemmassa ja viittaa siihen nimellä.

{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />

Vastaanottaminen lapsikomponentissa

Ilmoita snippet tyypitetyksi propiksi.

let { itemSnippet, items } = $props();
{#each items as thing}
  {@render itemSnippet(thing)}
{/each}

Render prop -malli

Tämä yleistää React-tyylisen render prop -mallin. Vanhemmat hallitsevat sitä, miten lapset renderöidään.

Mukauttaminen

Eri vanhemmat voivat toimittaa eri snippetit ja mukauttaa asettelun täysin.

Tyypitetyt snippet-propsit

Määritä TypeScriptillä snippetin parametri tyyppineen, jotta lapsikomponentit saavat automaattisen täydennyksen.

let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();

Valinnaiset snippetit

Snippet-propsit voivat olla valinnaisia; renderöi snippet vain, jos se on toimitettu.

{#if itemSnippet}
  {@render itemSnippet(thing)}
{/if}

Children-snippet

Oletussnippet on saatavana nimellä children $props()-funktiossa.

let { children } = $props();
{@render children()}

Koostamisen voima

Snippet-propsit ovat headless- ja koostettavien käyttöliittymäkirjastojen perusta.

TypeScript-tuonti

Tuo Snippet-tyyppi sveltestä asianmukaista tyypitystä varten.

import type { Snippet } from "svelte";

Vertailu slotteihin

Snippet-propsit ovat slotteja joustavampia: ne hyväksyvät parametreja ja niitä voidaan renderöidä ehdollisesti.

Pikatarkistus

Miten snippet vastaanotetaan propina?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Välitä snippetit propsina kääntääksesi hallinnan toisinpäin: vanhemmat toimittavat renderöintilogiikan ja lapset kutsuvat sitä @renderillä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Snippettien välittäminen propseina” ilmainen?

Kyllä – oppitunnin ”Snippettien välittäminen propseina” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Snippettien välittäminen propseina”?

Vastaanottakaa snippet-arvoja propseina erittäin joustavien komponentti-API:en rakentamiseksi. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Snippettien välittäminen propseina”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?

Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Sveltejs Academy