Mengembalikan Data dan Menggunakan $page.data
Kembalikan data dari load dan akses data tersebut di komponen halaman melalui prop data.
Mengembalikan Data dan Menggunakan $page.data adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Properti data
Halaman menerima properti khusus data yang diisi dari nilai yang dikembalikan fungsi pemuatan.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Aman terhadap Tipe
Dengan TypeScript, SvelteKit secara otomatis membuat tipe dari fungsi pemuatan untuk properti data.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Beberapa Properti
Kembalikan beberapa kunci; akses masing-masing melalui data.key.
Reaktivitas
Properti data diperbarui secara reaktif saat navigasi. Pengikatan ditampilkan ulang.
Penyimpan $page
Akses metadata di mana saja melalui $page dari $app/stores.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Penggabungan Data Tata Letak
Pemuatan tata letak dan pemuatan halaman digabungkan menjadi satu objek data yang dapat diakses di seluruh pohon halaman.
Properti Kustom
Anda dapat meneruskan nilai apa pun yang dapat diserialkan: larik, objek, nilai primitif, bahkan nilai yang dijanjikan untuk pengaliran data.
Hindari Fungsi
Fungsi tidak dapat diserialkan; kembalikan hanya data, bukan perilaku.
Nilai Bawaan
Jika fungsi pemuatan tidak mengembalikan apa pun, data adalah {}.
Komposisi dengan Penyimpan
Anda dapat mengisi penyimpan dari data pemuatan saat pemasangan agar dapat diakses secara global.
Kesalahan Halaman
Jika fungsi pemuatan menimbulkan kesalahan, +error.svelte terdekat akan ditampilkan. Data tidak ditetapkan.
Pemeriksaan Singkat
Bagaimana cara mengakses nilai yang dikembalikan fungsi pemuatan dalam komponen?
Ringkasan
Terima data pemuatan melalui properti data. Gunakan $page untuk URL, parameter, dan informasi rute.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengembalikan Data dan Menggunakan $page.data” gratis?
Ya — teks lengkap “Mengembalikan Data dan Menggunakan $page.data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengembalikan Data dan Menggunakan $page.data”?
Kembalikan data dari load dan akses data tersebut di komponen halaman melalui prop data. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Mengembalikan Data dan Menggunakan $page.data” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Fungsi load +page.js
- Mengembalikan Data dan Menggunakan $page.data
- Penanganan Error dalam load
- +page.server.js untuk Logika Khusus Server