Daten zurückgeben und $page.data verwenden
Geben Sie Daten aus load zurück und greifen Sie über die data-Prop in der Seitenkomponente darauf zu.
Daten zurückgeben und $page.data verwenden ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Das data-Prop
Die Seite erhält ein spezielles data-Prop, das aus der Rückgabe der load-Funktion befüllt wird.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Typsicher
Mit TypeScript generiert SvelteKit automatisch Typen aus load für data.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Mehrere Eigenschaften
Geben Sie mehrere Schlüssel zurück und greifen Sie über data.key auf die einzelnen Werte zu.
Reaktivität
Das data-Prop wird bei der Navigation reaktiv aktualisiert. Bindings werden neu gerendert.
$page-Store
Greifen Sie überall über $page aus $app/stores auf Metadaten zu.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Layout-Daten zusammenführen
Layout-load und Page-load werden zu einem Datenobjekt zusammengeführt, das überall im Seitenbaum verfügbar ist.
Benutzerdefinierte Props
Sie können beliebige serialisierbare Werte übergeben: Arrays, Objekte, primitive Werte und sogar Promises für Streaming.
Funktionen vermeiden
Funktionen können nicht serialisiert werden. Geben Sie nur Daten, kein Verhalten zurück.
Standardwerte
Wenn load nichts zurückgibt, ist data {}.
Mit Stores kombinieren
Sie können Stores beim Mounten mit load-Daten befüllen, um global darauf zuzugreifen.
Seitenfehler
Wenn load einen Fehler auslöst, wird der nächste +error.svelte angezeigt. data wird nicht gesetzt.
Schnelltest
Wie greifen Sie in einer Komponente auf die Rückgabe von load zu?
Zusammenfassung
Empfangen Sie Ladedaten über die data-Prop. Verwenden Sie $page für URL-, Parameter- und Routeninformationen.
Häufig gestellte Fragen
Ist die Lektion „Daten zurückgeben und $page.data verwenden“ kostenlos?
Ja — der vollständige Text von „Daten zurückgeben und $page.data verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Daten zurückgeben und $page.data verwenden“?
Geben Sie Daten aus load zurück und greifen Sie über die data-Prop in der Seitenkomponente darauf zu. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Daten zurückgeben und $page.data verwenden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- +page.js-load-Funktion
- Daten zurückgeben und $page.data verwenden
- Fehlerbehandlung in load
- +page.server.js für serverseitige Logik