Navngivne slots med slot="name"
Definér flere indsættelsespunkter i en komponent med navngivne slots
Navngivne slots med slot="name" er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvorfor navngivne slots
Komponenter har ofte brug for flere indsættelsespunkter: for eksempel en overskrift, en brødtekst og en sidefod.
Definition af navngivne slots
Tilføj en name-attribut til slotelementet i den underordnede komponent.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>Udfyldning af navngivne slots
Markér elementer fra den overordnede komponent med en slot="name"-attribut.
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>Blanding af standard og navngivne slots
Indhold uden en slot-attribut udfylder standardslottet. Navngivet indhold sendes til det slot, der har det pågældende navn.
Uafhængig rækkefølge
Rækkefølgen i den overordnede komponent er ligegyldig. Hvert slot matches efter navn.
Flere elementer pr. slot
Omslut flere elementer i en enkelt vært med slot-attributten for at sende dem alle til det samme slot.
Betingede overskrifter
Brug {#if} i den overordnede komponent til valgfrit at udfylde navngivne slots.
Almindelige layouts
Dette mønster er velegnet til layouts med overskrift, sidepanel, hovedindhold og sidefod.
Formularkomponenter
Formularkomponenter kan definere slots til præfiks, suffiks, hjælpetekst osv.
Selvdokumentation
Slotnavne beskriver komponentens API. Vælg beskrivende navne som title eller actions.
TypeScript-hjælpere
Du kan angive typer for slots med en særlig $$Slots-generisk type i TypeScript-Svelte-filer.
Hurtigt tjek
Hvordan målretter du et navngivet slot?
Opsummering
Definér flere <slot name="..."> i den underordnede komponent, og målret dem med slot="..." på elementer i den overordnede komponent.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Navngivne slots med slot="name"” gratis?
Ja — hele teksten til “Navngivne slots med slot="name"” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Navngivne slots med slot="name"”?
Definér flere indsættelsespunkter i en komponent med navngivne slots Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Navngivne slots med slot="name"”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Standard-slots til indholdsprojektion
- Navngivne slots med slot="name"
- Fallback-indhold i slots
- Kontrollér slot-indhold med $$slots