การส่งคืนข้อมูลและการใช้ $page.data
ส่งคืนข้อมูลจาก load และเข้าถึงข้อมูลในคอมโพเนนต์หน้าผ่านพร็อพ data
การส่งคืนข้อมูลและการใช้ $page.data เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
พร็อพ data
หน้าจะได้รับพร็อพพิเศษ data ซึ่งเติมค่าจากค่าที่ฟังก์ชันโหลดส่งคืน
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>ปลอดภัยด้านชนิดข้อมูล
เมื่อใช้ TypeScript, SvelteKit จะสร้างชนิดข้อมูลจาก load ไปยัง data โดยอัตโนมัติ
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>คุณสมบัติหลายรายการ
ส่งคืนคีย์หลายรายการ แล้วเข้าถึงแต่ละรายการผ่าน data.key
การตอบสนอง
พร็อพ data จะอัปเดตแบบตอบสนองเมื่อมีการนำทาง การผูกข้อมูลจะทำให้แสดงผลใหม่
สโตร์ $page
เข้าถึงข้อมูลเมตาได้จากทุกที่ผ่าน $page จาก $app/stores
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>การรวมข้อมูลของเลย์เอาต์
การโหลดข้อมูลของเลย์เอาต์และหน้าจะถูกรวมเป็นออบเจ็กต์ข้อมูลเดียว ซึ่งเข้าถึงได้ทั่วทั้งลำดับชั้นของหน้า
พร็อพแบบกำหนดเอง
คุณสามารถส่งค่าที่แปลงเป็นข้อมูลอนุกรมได้ทุกชนิด เช่น อาร์เรย์ ออบเจ็กต์ ค่าพื้นฐาน หรือแม้แต่พรอมิสสำหรับการสตรีม
หลีกเลี่ยงฟังก์ชัน
ฟังก์ชันไม่สามารถแปลงเป็นข้อมูลอนุกรมได้ จึงควรส่งคืนเฉพาะข้อมูล ไม่ใช่พฤติกรรม
ค่าเริ่มต้น
หากฟังก์ชันโหลดไม่ส่งคืนสิ่งใด data จะเป็น {}
การประกอบร่วมกับสโตร์
คุณสามารถเติมข้อมูลให้สโตร์จากข้อมูลโหลดเมื่อคอมโพเนนต์เริ่มทำงาน เพื่อให้เข้าถึงได้ทั่วทั้งแอป
ข้อผิดพลาดของหน้า
หากฟังก์ชันโหลดส่งข้อผิดพลาด เลย์เอาต์ +error.svelte ที่ใกล้ที่สุดจะแสดงขึ้น และจะไม่มีการกำหนดค่า data
ตรวจสอบความเข้าใจ
คุณเข้าถึงค่าที่ฟังก์ชันโหลดส่งคืนในคอมโพเนนต์ได้อย่างไร
สรุปทบทวน
รับข้อมูลการโหลดผ่านพร็อพ data ใช้ $page สำหรับ URL พารามิเตอร์ และข้อมูลเส้นทาง
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การส่งคืนข้อมูลและการใช้ $page.data” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การส่งคืนข้อมูลและการใช้ $page.data” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การส่งคืนข้อมูลและการใช้ $page.data”
ส่งคืนข้อมูลจาก load และเข้าถึงข้อมูลในคอมโพเนนต์หน้าผ่านพร็อพ data คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การส่งคืนข้อมูลและการใช้ $page.data” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟังก์ชันโหลด +page.js
- การส่งคืนข้อมูลและการใช้ $page.data
- การจัดการข้อผิดพลาดใน load
- +page.server.js สำหรับตรรกะเฉพาะเซิร์ฟเวอร์