การประกาศพร็อพด้วย export let
เปิดเผยคุณสมบัติของคอมโพเนนต์ให้คอมโพเนนต์แม่เข้าถึงโดยใช้คีย์เวิร์ด export
การประกาศพร็อพด้วย export let เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
พร็อพคือการส่งออก
หากต้องการประกาศพร็อพ ให้เขียน export let name ในสคริปต์ของคอมโพเนนต์ คีย์เวิร์ด export จะเปิดให้คอมโพเนนต์แม่เข้าถึงพร็อพนี้
<script>
export let name;
</script>
<p>Hello {name}!</p>พร็อพหลายรายการ
ประกาศพร็อพได้มากเท่าที่คอมโพเนนต์ต้องการ
<script>
export let title;
export let count;
export let onClick;
</script>พร็อพที่ระบุชนิด
เพิ่มชนิดด้วย TypeScript เพื่อความปลอดภัยและการสนับสนุนจากตัวแก้ไขโค้ด
<script lang="ts">
export let count: number;
export let label: string;
</script>เหตุผลที่ใช้ export
คีย์เวิร์ด export ในบริบทสคริปต์ยืมมาจากมอดูล ES แต่ใน Svelte มีความหมายว่า “เปิดให้คอมโพเนนต์แม่เข้าถึง”
จำเป็นเทียบกับไม่บังคับ
พร็อพที่ไม่มีค่าเริ่มต้นเป็นค่าที่จำเป็น ต้องกำหนดค่าเริ่มต้นหากต้องการให้เป็นค่าที่ไม่บังคับ
export let title = "Untitled";ข้อตกลงแบบอ่านอย่างเดียว
ให้ถือว่าพร็อพเป็นค่าเข้าที่อ่านอย่างเดียว แม้ในทางเทคนิคจะเปลี่ยนแปลงได้ แต่จะทำให้การไหลของข้อมูลทางเดียวเสียรูปแบบ
พร็อพแบบรีแอกทีฟ
พร็อพเป็นแบบรีแอกทีฟ เมื่อคอมโพเนนต์แม่ส่งค่าใหม่มา คอมโพเนนต์จะเรนเดอร์ใหม่โดยอัตโนมัติ
ฟังก์ชันเป็นค่าเริ่มต้น
ค่าเริ่มต้นอาจเป็นฟังก์ชันหรือนิพจน์ที่คำนวณได้
export let onClick = () => {};พร็อพบูลีน
สำหรับพร็อพบูลีน การระบุแอตทริบิวต์โดยไม่ใส่ค่าจะหมายถึง true
<MyComp disabled />พร็อพที่ใช้นามแฝง
หากชื่อพร็อพเป็นคำสงวน เช่น class คุณสามารถเปลี่ยนชื่อที่ใช้ภายในได้
let className;
export { className as class };นามแฝงที่เปลี่ยนชื่อแล้ว
รูปแบบนามแฝงช่วยให้รับชื่อที่เหมาะกับ HTML ได้ พร้อมคงตัวระบุที่ถูกต้องตาม JS ไว้ภายใน
ตรวจสอบอย่างรวดเร็ว
คุณประกาศพร็อพอย่างไร
สรุปทบทวน
ประกาศพร็อพด้วย export let ได้ สามารถระบุชนิดและค่าเริ่มต้นได้ และพร็อพจะเป็นแบบรีแอกทีฟเมื่อคอมโพเนนต์แม่อัปเดตค่า
คำถามที่พบบ่อย
บทเรียน “การประกาศพร็อพด้วย export let” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การประกาศพร็อพด้วย export let” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การประกาศพร็อพด้วย export let”
เปิดเผยคุณสมบัติของคอมโพเนนต์ให้คอมโพเนนต์แม่เข้าถึงโดยใช้คีย์เวิร์ด export คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การประกาศพร็อพด้วย export let” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประกาศพร็อพด้วย export let
- การส่งพร็อพจากคอมโพเนนต์แม่
- ค่าเริ่มต้นของพร็อพ
- การส่งต่อพร็อพด้วย $$props และ $$restProps