Returnera data och använd $page.data
Returnera data från load och få åtkomst till den i sidkomponenten via data-propen.
Returnera data och använd $page.data är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 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.
Prop:en data
Sidan tar emot en särskild data-prop som fylls med returvärdet från load-funktionen.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Typsäkert
Med TypeScript genererar SvelteKit automatiskt typer för data utifrån load.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Flera egenskaper
Returnera flera nycklar och kom åt var och en via data.key.
Reaktivitet
Data-propen uppdateras reaktivt vid navigering. Bindningar renderas om.
Storen $page
Kom åt metadata var som helst via $page från $app/stores.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Sammanfogning av layoutdata
Layoutens load och sidans load sammanfogas till ett dataobjekt som är tillgängligt överallt i sidträdet.
Anpassade props
Du kan skicka alla serialiserbara värden: arrayer, objekt, primitiva värden och även Promises för strömning.
Undvik funktioner
Funktioner kan inte serialiseras. Returnera endast data, inte beteende.
Standardvärden
Om load inte returnerar något är data {}.
Kombinera med stores
Du kan fylla stores med data från load när komponenten monteras för global åtkomst.
Sidfel
Om load kastar ett fel visas närmaste +error.svelte. data sätts inte.
Snabb kontroll
Hur kommer du åt returvärdet från load i en komponent?
Sammanfattning
Ta emot laddningsdata via propen data. Använd $page för URL, parametrar och information om routen.
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 ”Returnera data och använd $page.data” gratis?
Ja – hela texten till ”Returnera data och använd $page.data” 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 ”Returnera data och använd $page.data”?
Returnera data från load och få åtkomst till den i sidkomponenten via data-propen. 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 2 av 4.
Hur lång tid tar lektionen ”Returnera data och använd $page.data”?
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
- +page.js load-funktionen
- Returnera data och använd $page.data
- Felhantering i load
- +page.server.js för serverexklusiv logik