Sådan bruger du slots i Svelte

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.

Forstå slots i Svelte

Slots ind Svelte-rammen arbejde 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 markup, 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 element i en komponents skabelon. Det

slot element 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 componentspan>
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 Contentslot>
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
<slotmessage={message}>slot>
main>

Kodeblokken ovenfor repræsenterer en Svelte-komponent. Indenfor manuskript tag, erklærer du variablen besked og tildel teksten "Hej forældrekomponent!" til det. Du sender også meddelelsesvariablen til slot prop besked. 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
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

Det lad: besked syntaks tillader den overordnede komponent at få adgang til besked slidsprop, som den underordnede komponent giver. Det div tags besked variabel er dataene fra besked spalteprop.

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
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

I den overordnede komponent:

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

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 et navngivet slot, begiv en navn støtte til slot element:

<div>
 This is the child component

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

I dette eksempel er der to navngivne slots, slot navngivet header og det navngivne slot sidefod. Bruger slot prop, 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>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Denne kode viser, hvordan du bruger slot prop for at videregive indhold til navngivne slots. Først og fremmest span tag, du passerer slot prop med værdien header. Dette sikrer, at teksten inden for span tag vil gengives i header slot. Tilsvarende teksten inden for span tag med slot propens værdi sidefod vil gengive i sidefod slot.

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
<slotname="message">slot>
main>

Dernæst opretter du indpakningskomponenten:

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

I denne kodeblok sender du et andet navngivet slot ind i besked åbningen af ​​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>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

I ovenstående struktur sendes indholdet "Dette er fra den overordnede komponent" gennem indpakningskomponenten og direkte ind i den underordnede komponent takket være wrapperBesked slids 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 slot rekvisitter osv. Ved at forstå de forskellige typer slots og hvordan man bruger dem, kan du bygge dynamiske og fleksible brugergrænseflader.