Svelte tilbyder forskellige måder, hvorpå komponenter kan kommunikere med hinanden, herunder rekvisitter, slots osv. Du bliver nødt til at integrere slots for at skabe fleksible og genbrugelige komponenter i dine Svelte-applikationer.
Indholdsfortegnelse
Forstå spilleautomater i Svelte
Slots i Svelte-rammen fungerer på samme måde som slots i Vue. De giver en måde at overføre indhold fra en forælder til en underordnet komponent. Med pladser kan du definere pladsholdere i en komponents skabelon, hvor du kan injicere indhold fra en overordnet komponent.
Dette indhold kan være almindelig tekst, HTML-markering eller andre Svelte-komponenter. Arbejde med slots giver dig mulighed for at skabe meget tilpasselige og dynamiske komponenter, der tilpasser sig forskellige brugssager.
Oprettelse af en grundlæggende slot
For at oprette et slot i Svelte skal du bruge slot-elementet i en komponents skabelon. Slot-elementet er en pladsholder for det indhold, du vil videregive fra den overordnede komponent. Som standard vil pladsen gengive alt indhold, der sendes til det.
Her er et eksempel på, hvordan man opretter en grundlæggende slot:
<main>
This is the child component
<slot></slot>
</main>
Kodeblokken ovenfor repræsenterer en underordnet komponent, der bruger slotelementet til at hente indhold fra en overordnet komponent.
For at overføre indhold fra en overordnet komponent til en underordnet komponent, skal du først importere den underordnede komponent til den overordnede komponent. I stedet for at bruge et selvlukkende tag til at gengive den underordnede komponent, skal du derefter bruge et åbne- og lukketag. Til sidst skal du inden for komponentens tags skrive det indhold, du vil videregive fra forældre-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 component</span>
</Component>
</main>
Ud over at overføre indhold fra forældre-til-barn-komponenterne, kan du levere reserve-/standardindhold i pladserne. Dette indhold er, hvad pladsen vil vise, hvis den overordnede komponent ikke videregiver noget indhold.
Sådan kan du videregive et reserveindhold:
<main>
This is the child component
<slot>Fallback Content</slot>
</main>
Denne kodeblok giver teksten “Fallback Content” som et reserveindhold, som pladsen kan vise, hvis den overordnede komponent ikke leverer noget indhold.
Sende data på tværs af slot med slot rekvisitter
Svelte giver dig mulighed for at sende data til slots ved hjælp af slot rekvisitter. Du bruger slot-rekvisitterne i situationer, hvor du ønsker at videregive nogle data fra den underordnede komponent til det indhold, du sætter ind.
For eksempel:
<script>
let message="Hello Parent Component!"
</script><main>
This is the child component
<slot message={message}></slot>
</main>
Kodeblokken ovenfor repræsenterer en Svelte-komponent. I script-tagget erklærer du den variable besked og tildeler teksten “Hej forældrekomponent!” til det. Du sender også beskedvariablen til slot prop-meddelelsen. Dette gør meddelelsesdataene tilgængelige for den overordnede komponent, når den injicerer indhold i denne slot.
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component let:message>
<div>
The child component says {message}
</div>
</Component>
</main>
Let:message-syntaksen tillader den overordnede komponent at få adgang til den meddelelsesplads-prop, som den underordnede komponent leverer. div-taggets meddelelsesvariabel er dataene fra meddelelsespladsens prop.
Bemærk, at du ikke er begrænset til en enkelt slot-rekvisit, du kan videregive flere slot-rekvisitter efter behov:
<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script><main>
This is the child component
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
I den overordnede komponent:
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component let:firstName let:lastName>
<div>
The user's name is {firstName} {lastName}
</div>
</Component>
</main>
Arbejde med navngivne spilleautomater
Du kan bruge navngivne slots, når du vil sende flere slots i dine komponenter. Navngivne slots gør det nemmere at administrere forskellige slots, da du kan give hver slot et unikt navn. Med navngivne slots kan du bygge komplekse komponenter med varierende layout.
For at oprette en navngivet plads skal du sende en navneprop til slotelementet:
<div>
This is the child component
<p>Header: <slot name="header"></slot></p>
<p>Footer: <slot name="footer"></slot></p>
</div>
I dette eksempel er der to navngivne slots, slotnavnet sidehoved og slot navngivet footer. Ved at bruge slot-prop’en kan du sende indhold til hver slot fra den overordnede komponent.
For eksempel:
<script>
import Component from "./Component.svelte";
</script><main>
This is the parent component
<Component>
<span slot="header">This will be passed to the header slot</span>
<span slot="footer">This will be passed to the footer slot</span>
</Component>
</main>
Denne kode viser, hvordan du bruger slot-prop’en til at videregive indhold til navngivne slots. I den første span-tag sender du slot-propen med værdi-headeren. Dette sikrer, at teksten i span-tagget gengives i header-pladsen. På samme måde gengives teksten i span-tagget med pladspropens værdisidefod i sidefodspladsen.
Forstå Slot Forwarding
Slot forwarding er en funktion i Svelte, der giver dig mulighed for at sende indhold fra en overordnet komponent gennem en wrapper-komponent til en underordnet komponent. Dette kan være meget nyttigt i tilfælde, hvor du ønsker at videregive indhold fra ikke-relaterede komponenter.
Her er et eksempel på, hvordan du bruger slotvideresendelse. Opret først den underordnede komponent:
<main>
This is the child component
<slot name="message"></slot>
</main>
Dernæst opretter du indpakningskomponenten:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
I denne kodeblok sender du et andet navngivet slot ind i meddelelsespladsen for den underordnede komponent.
Skriv derefter denne kode i den overordnede komponent:
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
This is the parent component
<Wrapper>
<div slot="wrapperMessage">
This is from the parent component
</div>
</Wrapper>
</main>
I ovenstående struktur bliver indholdet “Dette er fra den overordnede komponent” sendt gennem indpakningskomponenten og direkte ind i underordnet komponent takket være wrapperMessage-åbningen inde i indpakningskomponenten.
Gør dit liv lettere med Svelte Slots
Slots er en kraftfuld funktion i Svelte, der giver dig mulighed for at skabe meget tilpasselige og genbrugelige komponenter. Du har lært, hvordan du opretter grundlæggende slots, navngivne slots, bruger spilleautomater osv. Ved at forstå de forskellige typer slots og hvordan du bruger dem, kan du bygge dynamiske og fleksible brugergrænseflader.
