Hur man använder slots i Svelte

Svelte erbjuder olika sätt för komponenter att kommunicera med varandra, inklusive rekvisita, slots, etc. Du kommer att behöva integrera slots för att skapa flexibla och återanvändbara komponenter i dina Svelte-applikationer.

Förstå Slots i Svelte

Slots in Svelte-ramverket fungerar på samma sätt som slots i Vue. De tillhandahåller ett sätt att överföra innehåll från en förälder till en underordnad komponent. Med platser kan du definiera platshållare i en komponents mall där du kan injicera innehåll från en överordnad komponent.

Detta innehåll kan vara vanlig text, HTML-uppmärkning, eller andra Svelte-komponenter. Att arbeta med slots gör att du kan skapa mycket anpassningsbara och dynamiska komponenter som anpassar sig till olika användningsfall.

Skapa en grundläggande slot

För att skapa en slot i Svelte, använd spår element i en komponents mall. De

spår element är en platshållare för innehållet som du skickar från den överordnade komponenten. Som standard renderar platsen allt innehåll som skickas till den.

Här är ett exempel på hur man skapar en grundläggande slot:

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

Kodblocket ovan representerar en underordnad komponent som använder platselementet för att hämta innehåll från en överordnad komponent.

För att överföra innehåll från en överordnad komponent till en underordnad komponent, importerar du först den underordnade komponenten till den överordnade komponenten. Sedan, istället för att använda en självstängande tagg för att återge den underordnade komponenten, använd en öppnings- och stängningstagg. Slutligen, inom komponentens taggar, skriv innehållet du vill skicka från förälder-till-barn-komponenten.

Till exempel:

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

Förutom att skicka innehåll från förälder-till-barn-komponenterna kan du tillhandahålla reserv-/standardinnehåll i platserna. Detta innehåll är vad platsen kommer att visa om den överordnade komponenten inte skickar något innehåll.

Så här kan du skicka ett reservinnehåll:

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

Det här kodblocket tillhandahåller texten "Fallback Content" som reservinnehåll för platsen att visa om den överordnade komponenten inte tillhandahåller något innehåll.

Skickar data över plats med platsrekvisita

Svelte låter dig skicka data till slots med hjälp av platsrekvisita. Du använder platsrekvisita i situationer där du vill överföra en del data från den underordnade komponenten till innehållet du placerar in.

Till exempel:

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

Kodblocket ovan representerar en Svelte-komponent. Inom manus taggen deklarerar du variabeln meddelande och tilldela texten "Hej förälderkomponent!" till det. Du skickar också meddelandevariabeln till slot prop meddelande. Detta gör meddelandedata tillgänglig för den överordnade komponenten när den injicerar innehåll i denna plats.

<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 låt: meddelande syntax tillåter den överordnade komponenten att komma åt meddelande slitsstöd som den underordnade komponenten tillhandahåller. De div taggar meddelande variabel är data från meddelande slits prop.

Observera att du inte är begränsad till en enda platsrekvisita, du kan skicka flera platsrekvisita 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 överordnade 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>

Arbeta med namngivna spelautomater

Du kan använda namngivna platser när du vill skicka flera platser i dina komponenter. Namngivna slots gör det enklare att hantera olika slots, eftersom du kan ge varje slot ett unikt namn. Med namngivna slots kan du bygga komplexa komponenter med varierande layouter.

För att skapa en namngiven plats, skicka a namn stötta till spår element:

<div>
 This is the child component

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

I det här exemplet finns det två namngivna platser, luckan namngiven rubrik och platsen som heter sidfot. Använda spår prop, kan du skicka innehåll till varje plats från den överordnade komponenten.

Till exempel:

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

Den här koden visar hur du använder spår prop för att skicka innehåll till namngivna platser. I den första spänna taggen passerar du spår prop med värdet rubrik. Detta säkerställer att texten i spänna taggen återges i rubrik spår. På samma sätt är texten inom spänna tagga med spår rekvisitans värde sidfot kommer att återge i sidfot spår.

Förstå Slot Forwarding

Platsvidarebefordran är en funktion i Svelte som låter dig överföra innehåll från en överordnad komponent genom en omslagskomponent till en underordnad komponent. Detta kan vara mycket användbart i fall där du vill skicka innehåll från orelaterade komponenter.

Här är ett exempel på hur du använder platsvidarebefordran, skapa först den underordnade komponenten:

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

Därefter skapar du omslagskomponenten:

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

I det här kodblocket skickar du en annan namngiven plats till meddelande kortplatsen på den underordnade komponenten.

Skriv sedan den här koden i den överordnade 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 ovanstående struktur passerar innehållet "Detta är från den överordnade komponenten" genom omslagskomponenten och direkt in i den underordnade komponenten tack vare wrapperMessage slits inuti omslagskomponenten.

Gör ditt liv enklare med Svelte Slots

Slots är en kraftfull funktion i Svelte som låter dig skapa mycket anpassningsbara och återanvändbara komponenter. Du har lärt dig hur du skapar grundläggande slots, namngivna slots, använder spelautomater etc. Genom att förstå de olika typerna av slots och hur man använder dem kan du bygga dynamiska och flexibla användargränssnitt.