Svelte erbjuder diverse metoder för komponenter att samverka, inklusive att skicka värden (props) och använda platser (slots). För att skapa flexibla och återanvändbara komponenter i dina Svelte-applikationer är det viktigt att behärska användningen av slots.
Förståelse av Slots i Svelte
Slots i Svelte-ramverket fungerar på ett liknande sätt som i Vue. De erbjuder ett sätt att överföra innehåll från en föräldrakomponent till en underkomponent. Genom att använda slots definierar du platshållare i en komponents mall, där innehåll från den överordnade komponenten kan infogas.
Detta innehåll kan vara vanlig text, HTML eller andra Svelte-komponenter. Med hjälp av slots kan du utveckla 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änds slot-elementet i en komponents mall. Slot-elementet fungerar som en platshållare för det innehåll som skickas från den överordnade komponenten. Som standard renderas allt innehåll som skickas till sloten.
Här är ett exempel på hur man skapar en enkel slot:
<main>
Detta är underkomponenten
<slot></slot>
</main>
Koden ovan representerar en underkomponent som använder slot-elementet för att ta emot innehåll från en överordnad komponent.
För att skicka innehåll från en överordnad till en underordnad komponent, importeras först den underordnade komponenten i den överordnade. Istället för att använda en självstängande tagg för att återge den underordnade komponenten, används en öppnings- och stängningstagg. Inom dessa taggar placeras det innehåll som ska skickas från den överordnade till den underordnade komponenten.
Till exempel:
<script>
import Component from "./Component.svelte";
</script><main>
Detta är den överordnade komponenten
<Component>
<span>Detta är ett meddelande från den överordnade komponenten</span>
</Component>
</main>
Utöver att skicka innehåll från överordnade till underordnade komponenter, kan du även definiera standardinnehåll i slots. Detta innehåll visas om den överordnade komponenten inte skickar något innehåll.
Så här definieras ett standardinnehåll:
<main>
Detta är underkomponenten
<slot>Standardinnehåll</slot>
</main>
Detta kodblock visar texten ”Standardinnehåll” som ett reservinnehåll för sloten, som visas om den överordnade komponenten inte skickar något eget innehåll.
Skicka data via Slot med hjälp av Slot Props
Svelte möjliggör att skicka data till slots med hjälp av slot props. Du använder slot props när du vill överföra data från den underordnade komponenten till det infogade innehållet.
Till exempel:
<script>
let message="Hej Överordnad Komponent!"
</script><main>
Detta är underkomponenten
<slot message={message}></slot>
</main>
Koden ovan representerar en Svelte-komponent. Inom skript-taggen deklareras variabeln `message` och tilldelas texten ”Hej Överordnad Komponent!”. Du skickar även variabeln `message` till slot prop:en `message`. Detta gör datan i `message` tillgänglig för den överordnade komponenten när den injicerar innehåll i sloten.
<script>
import Component from "./Component.svelte";
</script><main>
Detta är den överordnade komponenten
<Component let:message>
<div>
Underkomponenten säger: {message}
</div>
</Component>
</main>
Syntaxen `let:message` ger den överordnade komponenten tillgång till `message` slot prop, som skickas av den underordnade komponenten. Div-taggens `message`-variabel visar datan från `message`-slot prop.
Observera att du inte är begränsad till en enda slot prop, du kan skicka flera slot props vid behov:
<script>
let user = {
firstName: 'John',
lastName: 'Doe'
};
</script><main>
Detta är underkomponenten
<slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>
I den överordnade komponenten:
<script>
import Component from "./Component.svelte";
</script><main>
Detta är den överordnade komponenten
<Component let:firstName let:lastName>
<div>
Användarens namn är {firstName} {lastName}
</div>
</Component>
</main>
Arbeta med namngivna Slots
Du kan använda namngivna slots när du vill hantera flera slots i dina komponenter. Namngivna slots gör det enklare att strukturera olika slots, eftersom varje slot kan ha ett unikt namn. Med namngivna slots kan du skapa komplexa komponenter med varierande layouter.
För att skapa en namngiven slot, skicka en `name` prop till slot-elementet:
<div>
Detta är underkomponenten
<p>Header: <slot name="header"></slot></p>
<p>Footer: <slot name="footer"></slot></p>
</div>
I det här exemplet finns det två namngivna slots: `header` och `footer`. Med hjälp av slot prop kan du skicka innehåll till varje slot från den överordnade komponenten.
Till exempel:
<script>
import Component from "./Component.svelte";
</script><main>
Detta är den överordnade komponenten
<Component>
<span slot="header">Detta skickas till header-sloten</span>
<span slot="footer">Detta skickas till footer-sloten</span>
</Component>
</main>
Den här koden demonstrerar hur du använder `slot` attributet för att skicka innehåll till namngivna slots. I den första `span`-taggen skickas innehållet till slot med värdet `header`. Detta ser till att texten i den `span`-taggen renderas i header-sloten. På samma sätt renderas texten i `span`-taggen med `slot` attributet värdet `footer` i footer-sloten.
Förstå Slot Forwarding
Slot forwarding är en funktion i Svelte som låter dig överföra innehåll från en överordnad komponent via en omslutande komponent till en underkomponent. Detta kan vara användbart i scenarier där du vill skicka innehåll från komponenter som inte är direkt relaterade till varandra.
Här är ett exempel på hur slot forwarding kan användas. Skapa först den underordnade komponenten:
<main>
Detta är underkomponenten
<slot name="message"></slot>
</main>
Sedan skapar du omslutningskomponenten:
<script>
import Component from "./Component.svelte";
</script><main>
<Component>
<div slot="message">
<slot name="wrapperMessage"></slot>
</div>
</Component>
</main>
I detta kodblock skickas en annan namngiven slot till `message`-sloten i den underordnade komponenten.
Skriv sedan den här koden i den överordnade komponenten:
<script>
import Wrapper from "./Wrapper.svelte";
</script><main>
Detta är den överordnade komponenten
<Wrapper>
<div slot="wrapperMessage">
Detta är från den överordnade komponenten
</div>
</Wrapper>
</main>
I ovanstående struktur passerar innehållet ”Detta är från den överordnade komponenten” via omslutningskomponenten och direkt in i den underordnade komponenten, tack vare `wrapperMessage`-sloten som är definierad i omslutningskomponenten.
Underlätta ditt arbete med Svelte Slots
Slots är en kraftfull funktion i Svelte som gör det möjligt att skapa mycket anpassningsbara och återanvändbara komponenter. Du har nu lärt dig hur man skapar grundläggande slots, namngivna slots och hur man använder slot forwarding med mera. Genom att förstå olika typer av slots och deras användning kan du bygga dynamiska och flexibla användargränssnitt.