Svelte tilbyr ulike metoder for komponentkommunikasjon, inkludert props og signaler. For å skape fleksible og gjenbrukbare komponenter i Svelte-applikasjoner, er det essensielt å integrere slots.
Forstå Slots i Svelte
Slots i Svelte-rammeverket fungerer analogt med slots i Vue. De muliggjør overføring av innhold fra en foreldrekomponent til en underordnet komponent. Med slots kan du definere plassholdere i en komponents mal, hvor innhold fra en overordnet komponent kan injiseres.
Dette innholdet kan være ren tekst, HTML-markering eller andre Svelte-komponenter. Bruk av slots lar deg konstruere svært tilpassbare og dynamiske komponenter som egner seg for en rekke bruksområder.
Opprette en Grunnleggende Slot
For å definere en slot i Svelte, benytt <slot>-elementet i en komponents mal. <slot>-elementet fungerer som en plassholder for innhold som sendes fra den overordnede komponenten. Som standard vil slot’en gjengi alt innhold den mottar.
Her er et eksempel på hvordan du definerer en grunnleggende slot:
<main>
Dette er barnekomponenten
<slot></slot>
</main>
Kodeblokken over viser en underordnet komponent som bruker <slot>-elementet for å motta innhold fra en foreldrekomponent.
For å overføre innhold fra en foreldrekomponent til en underordnet komponent, må du først importere den underordnede komponenten til foreldrekomponenten. Deretter, i stedet for å bruke en selvlukkende tag for å gjengi den underordnede komponenten, bruker du en åpnings- og lukketag. Til slutt, innenfor disse taggene, skriver du innholdet som skal overføres.
For eksempel:
<script>
import Komponent from "./Komponent.svelte";
</script><main>
Dette er foreldrekomponenten
<Komponent>
<span>Dette er en melding fra foreldrekomponenten</span>
</Komponent>
</main>
I tillegg til å overføre innhold fra foreldre- til barnekomponenter, kan du inkludere fallback-/standardinnhold i slots. Dette innholdet vises dersom foreldrekomponenten ikke sender noe innhold.
Slik angir du fallback-innhold:
<main>
Dette er barnekomponenten
<slot>Fallback Innhold</slot>
</main>
Denne kodeblokken angir teksten «Fallback Innhold» som et fallback for slot’en, som vises dersom foreldrekomponenten ikke leverer noe innhold.
Sende Data Gjennom Slot med Slot Props
Svelte lar deg overføre data til slots ved bruk av slot props. Slot props er nyttige i situasjoner der du ønsker å sende data fra barnekomponenten til innholdet som injiseres.
For eksempel:
<script>
let melding="Hei Foreldrekomponent!"
</script><main>
Dette er barnekomponenten
<slot melding={melding}></slot>
</main>
Kodeblokken over representerer en Svelte-komponent. Inne i <script>-taggen deklareres variabelen «melding» og tildeles teksten «Hei Foreldrekomponent!». Du sender også «melding»-variabelen til slot prop’en «melding». Dette gjør «melding»-dataene tilgjengelige for foreldrekomponenten når den injiserer innhold i slot’en.
<script>
import Komponent from "./Komponent.svelte";
</script><main>
Dette er foreldrekomponenten
<Komponent let:melding>
<div>
Barnekomponenten sier: {melding}
</div>
</Komponent>
</main>
Syntaksen «let:melding» lar foreldrekomponenten få tilgang til «melding» slot prop’en som barnet leverer. Variabelen «melding» i <div>-taggen henter dataene fra «melding» slot prop’en.
Husk at du ikke er begrenset til en enkelt slot; du kan sende flere slot props etter behov:
<script>
let bruker = {
fornavn: 'Ola',
etternavn: 'Nordmann'
};
</script><main>
Dette er barnekomponenten
<slot fornavn={bruker.fornavn} etternavn={bruker.etternavn}></slot>
</main>
I foreldrekomponenten:
<script>
import Komponent from "./Komponent.svelte";
</script><main>
Dette er foreldrekomponenten
<Komponent let:fornavn let:etternavn>
<div>
Brukerens navn er {fornavn} {etternavn}
</div>
</Komponent>
</main>
Arbeide med Navngitte Slots
Navngitte slots er nyttige når du ønsker å bruke flere slots i komponentene dine. De gjør det lettere å håndtere forskjellige slots, da hver slot kan få et unikt navn. Navngitte slots muliggjør bygging av komplekse komponenter med varierende oppsett.
For å opprette en navngitt slot, send en «name»-prop til <slot>-elementet:
<div>
Dette er barnekomponenten
<p>Overskrift: <slot name="overskrift"></slot></p>
<p>Bunntekst: <slot name="bunntekst"></slot></p>
</div>
I dette eksemplet er det to navngitte slots, en med navn «overskrift» og en med navn «bunntekst». Disse slotene gjør det mulig å sende innhold til hver slot fra foreldrekomponenten.
For eksempel:
<script>
import Komponent from "./Komponent.svelte";
</script><main>
Dette er foreldrekomponenten
<Komponent>
<span slot="overskrift">Dette sendes til overskrift-slot'en</span>
<span slot="bunntekst">Dette sendes til bunntekst-slot'en</span>
</Komponent>
</main>
Denne koden illustrerer hvordan man bruker slots til å sende innhold til navngitte slots. I den første <span>-taggen sendes prop’en «slot» med verdien «overskrift». Dette sikrer at teksten innenfor denne <span>-taggen blir gjengitt i «overskrift»-slot’en. På samme måte vil teksten i <span>-taggen med verdien «bunntekst» for prop’en «slot» bli gjengitt i «bunntekst»-slot’en.
Forstå Slot Videresending
Slot videresending er en funksjon i Svelte som lar deg overføre innhold fra en foreldrekomponent gjennom en innpakningskomponent til en underordnet komponent. Dette kan være nyttig i tilfeller der du ønsker å overføre innhold fra ikke-relaterte komponenter.
Her er et eksempel på hvordan du bruker slot videresending. Først opprettes den underordnede komponenten:
<main>
Dette er barnekomponenten
<slot name="melding"></slot>
</main>
Deretter opprettes innpakningskomponenten:
<script>
import Komponent from "./Komponent.svelte";
</script><main>
<Komponent>
<div slot="melding">
<slot name="innpakningsmelding"></slot>
</div>
</Komponent>
</main>
I denne kodeblokken sendes en annen navngitt slot inn i «melding»-slot’en til den underordnede komponenten.
Deretter skrives denne koden i foreldrekomponenten:
<script>
import Innpakning from "./Innpakning.svelte";
</script><main>
Dette er foreldrekomponenten
<Innpakning>
<div slot="innpakningsmelding">
Dette er fra foreldrekomponenten
</div>
</Innpakning>
</main>
I strukturen over sendes innholdet «Dette er fra foreldrekomponenten» gjennom innpakningskomponenten og direkte inn i den underordnede komponenten, takket være «innpakningsmelding»-slot’en inne i innpakningskomponenten.
Gjør Livet Enklere med Svelte Slots
Slots er en kraftfull funksjon i Svelte som lar deg skape svært tilpassbare og gjenbrukbare komponenter. Du har lært hvordan du oppretter grunnleggende slots, navngitte slots, og hvordan du bruker slot props. Ved å forstå de forskjellige typene slots og hvordan de brukes, kan du bygge dynamiske og fleksible brukergrensesnitt.