เหตุการณ์กำหนดเองด้วย createEventDispatcher
ส่งเหตุการณ์กำหนดเองที่มีชนิดจากคอมโพเนนต์ลูกเพื่อให้คอมโพเนนต์แม่จัดการ
เหตุการณ์กำหนดเองด้วย createEventDispatcher เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ใช้เหตุการณ์กำหนดเอง
คอมโพเนนต์ลูกสื่อสารขึ้นไปยังคอมโพเนนต์แม่ด้วยการส่งเหตุการณ์กำหนดเอง ซึ่งคอมโพเนนต์แม่จะเป็นผู้รับฟัง
นำเข้าตัวส่งเหตุการณ์
นำเข้า createEventDispatcher จาก svelte แล้วสร้างตัวส่งเหตุการณ์ภายในสคริปต์
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>ส่งเหตุการณ์
เรียก dispatch(name, detail) เพื่อส่งเหตุการณ์ คอมโพเนนต์แม่จะรับฟังด้วย on:name
function save() { dispatch("save", { id: 42 }); }รับฟังในคอมโพเนนต์แม่
จัดการเหตุการณ์กำหนดเองเช่นเดียวกับเหตุการณ์ DOM
<Child on:save={(e) => console.log(e.detail.id)} />รายละเอียดเหตุการณ์
อาร์กิวเมนต์ตัวที่สองจะกลายเป็น event.detail ที่ฝั่งผู้รับ
ไม่มีการแพร่ต่อโดยค่าเริ่มต้น
เหตุการณ์กำหนดเองจะไม่แพร่ต่อผ่านแผนผังคอมโพเนนต์ของ Svelte โดยอัตโนมัติ หากจำเป็นต้องส่งต่อ ให้ระบุอย่างชัดเจน
เหตุการณ์แบบมีชนิด
เมื่อใช้ TypeScript คุณสามารถกำหนดชนิดให้เหตุการณ์ เพื่อให้คอมโพเนนต์แม่มีคำแนะนำการเติมข้อความอัตโนมัติ
const dispatch = createEventDispatcher<{ save: { id: number } }>();เหตุการณ์ที่ยกเลิกได้
ส่ง { cancelable: true } เป็นอาร์กิวเมนต์ตัวที่สาม เพื่ออนุญาตให้คอมโพเนนต์แม่เรียก preventDefault ได้
เหตุการณ์หลายรายการ
ตัวส่งเหตุการณ์หนึ่งตัวสามารถส่งเหตุการณ์ได้หลายชนิด ควรใช้ชื่อที่ไม่ซ้ำกันตามเจตนาของแต่ละเหตุการณ์
หลีกเลี่ยงชื่อทั่วไป
ควรใช้ชื่อที่เฉพาะเจาะจง เช่น itemSelected แทนชื่อทั่วไปอย่าง change
เหตุการณ์กับฟังก์ชันเรียกกลับ
เหตุการณ์เหมาะสำหรับส่งสัญญาณขึ้นไปยังคอมโพเนนต์แม่ หากต้องการการเชื่อมต่อที่แน่นแฟ้น ควรพิจารณาส่งพร็อพฟังก์ชันเรียกกลับ
ตรวจสอบความเข้าใจ
คอมโพเนนต์แม่อ่านข้อมูลเหตุการณ์ได้อย่างไร
สรุป
ใช้ createEventDispatcher เพื่อส่งเหตุการณ์ที่มีชื่อพร้อมข้อมูลรายละเอียด และรับฟังด้วย on:eventName
คำถามที่พบบ่อย
บทเรียน “เหตุการณ์กำหนดเองด้วย createEventDispatcher” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เหตุการณ์กำหนดเองด้วย createEventDispatcher” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์กำหนดเองด้วย createEventDispatcher”
ส่งเหตุการณ์กำหนดเองที่มีชนิดจากคอมโพเนนต์ลูกเพื่อให้คอมโพเนนต์แม่จัดการ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “เหตุการณ์กำหนดเองด้วย createEventDispatcher” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- on:click on:input on:submit
- ตัวปรับแต่งเหตุการณ์: preventDefault stopPropagation once
- เหตุการณ์กำหนดเองด้วย createEventDispatcher
- การส่งต่อเหตุการณ์ด้วย on:click