Kontrollera slot-innehåll med $$slots
Granska $$slots för att endast rendera omslutande markup när en slot används.
Kontrollera slot-innehåll med $$slots är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Varför kontrollera slots
Ibland ska omslutande markup, till exempel kantlinje eller sidhuvud, bara renderas om sloten innehåller innehåll.
Objektet slots
Inuti en komponent är $$slots ett objekt med en egenskap för varje fylld slot.
Sanningsvärde när sloten är fylld
Om en slot innehåller innehåll har dess nyckel i $$slots ett sanningsvärde.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}Undvik tomma omslutare
Hoppa över rendering av omslutande markup när sloten är tom, så hålls DOM-trädet rent.
Kombinera med standardvärden
Det går att välja mellan reservinnehåll och att hoppa över den omslutande markupen helt.
Reaktiv detektering
$$slots uppdateras reaktivt om slot-innehållet ändras mellan renderingar.
Använd med flera slots
Kontrollera varje namngiven slot separat.
{#if $$slots.header || $$slots.footer}...Vanligt i kort
Kort med valfritt titel- eller sidfotsinnehåll använder ofta det här mönstret.
Nyckeln för standard-slot
Standard-slotens innehåll finns under $$slots.default.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
TypeScript-användare kan deklarera en $$Slots-typ för att få autokomplettering för $$slots.
Avvägningar
Det lägger till förgreningar i markupen men ger ett renare resultat. För designsystem är det ofta värt det.
Snabbkontroll
Vad kontrollerar $$slots.header?
Sammanfattning
Använd $$slots.name för att upptäcka om den överordnade komponenten har fyllt en slot, och hoppa över omslutande markup när den inte har gjort det.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Kontrollera slot-innehåll med $$slots” gratis?
Ja – hela texten till ”Kontrollera slot-innehåll med $$slots” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kontrollera slot-innehåll med $$slots”?
Granska $$slots för att endast rendera omslutande markup när en slot används. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Kontrollera slot-innehåll med $$slots”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Standard-slots för innehållsprojektion
- Namngivna slots med slot="name"
- Reservinnehåll för slots
- Kontrollera slot-innehåll med $$slots