Hvordan bruke spilleautomater i Svelte

Svelte tilbyr forskjellige måter for komponenter å kommunisere med hverandre, inkludert rekvisitter, spor osv. Du må integrere spor for å lage fleksible og gjenbrukbare komponenter i Svelte-applikasjonene dine.

Forstå spilleautomater i Svelte

Slots inn Svelte-rammeverket fungerer på samme måte som spilleautomater i Vue. De gir en måte å overføre innhold fra en forelder til en underordnet komponent. Med spor kan du definere plassholdere i en komponents mal der du kan injisere innhold fra en overordnet komponent.

Dette innholdet kan være ren tekst, HTML-oppmerking, eller andre Svelte-komponenter. Å jobbe med spilleautomater lar deg lage svært tilpassbare og dynamiske komponenter som tilpasser seg ulike brukstilfeller.

Opprette en grunnleggende spilleautomat

For å opprette en spilleautomat i Svelte, bruk spor element i en komponents mal. De spor element er en plassholder for innholdet du vil sende fra den overordnede komponenten. Som standard vil sporet gjengi alt innhold som sendes til det.

Her er et eksempel på hvordan du oppretter en grunnleggende spilleautomat:

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

Kodeblokken ovenfor representerer en underordnet komponent som bruker sporelementet for å hente innhold fra en overordnet komponent.

For å overføre innhold fra en overordnet komponent til en underordnet komponent, vil du først importere den underordnede komponenten til den overordnede komponenten. Deretter, i stedet for å bruke en selvlukkende tag for å gjengi den underordnede komponenten, bruker du en åpnings- og lukketag. Til slutt, i komponentens tagger, skriv innholdet du vil overføre fra foreldre-til-barn-komponenten.

For eksempel:

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

I tillegg til å sende innhold fra foreldre-til-barn-komponentene, kan du gi reserve-/standardinnhold i sporene. Dette innholdet er det sporet vil vise hvis den overordnede komponenten ikke sender noe innhold.

Slik kan du sende et reserveinnhold:

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

Denne kodeblokken gir teksten "Fallback Content" som et reserveinnhold for sporet som skal vises hvis den overordnede komponenten ikke gir noe innhold.

Sende data over sporet med sporrekvisitter

Svelte lar deg sende data til spor ved hjelp av sporrekvisitter. Du bruker sporrekvisittene i situasjoner der du ønsker å overføre noen data fra barnekomponenten til innholdet du legger inn.

For eksempel:

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

Kodeblokken ovenfor representerer en Svelte-komponent. Innen manus tag, erklærer du variabelen beskjed og tilordne teksten "Hei foreldrekomponent!" til det. Du sender også meldingsvariabelen til sporpropp beskjed. Dette gjør meldingsdataene tilgjengelige for den overordnede komponenten når den injiserer innhold i dette sporet.

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

De la: melding syntaks lar den overordnede komponenten få tilgang til beskjed sporprop som barnekomponenten gir. De div tags beskjed variabel er dataene fra beskjed spor prop.

Vær oppmerksom på at du ikke er begrenset til en enkelt spilleautomat, du kan sende flere sporrekvisitter etter behov:

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

I den overordnede komponenten:

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

Arbeide med navngitte spilleautomater

Du kan bruke navngitte spor når du vil sende flere spor i komponentene dine. Navngitte spilleautomater gjør det enklere å administrere ulike spilleautomater, siden du kan gi hver spilleautomat et unikt navn. Med navngitte spor kan du bygge komplekse komponenter med varierende oppsett.

For å opprette et navngitt spor, send en Navn støtte til spor element:

<div>
 This is the child component

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

I dette eksemplet er det to navngitte spor, sporet navngitt Overskrift og sporet som heter bunntekst. Bruker spor prop, kan du sende innhold til hvert spor fra den overordnede komponenten.

For eksempel:

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

Denne koden viser hvordan du bruker spor prop for å sende innhold til navngitte plasser. I det første span tag, passerer du spor prop med verdien Overskrift. Dette sikrer at teksten i span taggen vil gjengis i Overskrift spor. På samme måte er teksten i span merke med spor rekvisittens verdi bunntekst vil gjengi i bunntekst spor.

Forstå spaltevideresending

Sporvideresending er en funksjon i Svelte som lar deg sende innhold fra en overordnet komponent gjennom en innpakningskomponent til en underordnet komponent. Dette kan være svært nyttig i tilfeller der du ønsker å overføre innhold fra ikke-relaterte komponenter.

Her er et eksempel på hvordan du bruker sporvideresending. Opprett først den underordnede komponenten:

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

Deretter lager du innpakningskomponenten:

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

I denne kodeblokken sender du et annet navngitt spor inn i beskjed sporet til barnekomponenten.

Skriv deretter denne koden i den overordnede komponenten:

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

I strukturen ovenfor sendes innholdet "Dette er fra den overordnede komponenten" gjennom innpakningskomponenten og direkte inn i underkomponenten takket være wrapperMessage spor inne i innpakningskomponenten.

Gjør livet ditt enklere med Svelte-spilleautomater

Spilleautomater er en kraftig funksjon i Svelte som lar deg lage svært tilpassbare og gjenbrukbare komponenter. Du har lært hvordan du lager grunnleggende spilleautomater, navngitte spilleautomater, bruker spilleautomater osv. Ved å forstå de forskjellige typer spilleautomater og hvordan du bruker dem, kan du bygge dynamiske og fleksible brukergrensesnitt.