Peristiwa Kustom dengan createEventDispatcher
Kirim peristiwa kustom bertipe dari komponen anak agar ditangani komponen induk.
Peristiwa Kustom dengan createEventDispatcher adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Alasan Menggunakan Peristiwa Khusus
Komponen anak berkomunikasi ke atas dengan mengirimkan peristiwa khusus yang didengarkan oleh induknya.
Mengimpor Pengirim
Impor createEventDispatcher dari svelte, lalu buat satu di dalam skrip Anda.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Mengirimkan Peristiwa
Panggil dispatch(name, detail) untuk mengirimkan peristiwa. Komponen induk mendengarkannya dengan on:name.
function save() { dispatch("save", { id: 42 }); }Mendengarkan di Komponen Induk
Perlakukan peristiwa khusus seperti peristiwa DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Detail Peristiwa
Argumen kedua menjadi event.detail di sisi penerima.
Tidak Merambat secara Bawaan
Peristiwa khusus tidak otomatis merambat melalui pohon komponen Svelte. Teruskan secara eksplisit jika diperlukan.
Peristiwa Bertipe
Dengan TypeScript, Anda dapat menentukan tipe peristiwa agar pelengkapan otomatis tersedia di komponen induk.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Peristiwa yang Dapat Dibatalkan
Berikan { cancelable: true } sebagai argumen ketiga agar komponen induk dapat menggunakan preventDefault.
Beberapa Peristiwa
Satu pengirim dapat mengirimkan banyak jenis peristiwa; gunakan nama yang unik untuk setiap maksud.
Hindari Nama Umum
Utamakan nama khusus seperti itemSelected daripada change yang bersifat umum.
Peristiwa vs Panggilan Balik
Peristiwa cocok untuk sinyal ke atas; untuk integrasi yang erat, pertimbangkan untuk meneruskan properti fungsi panggilan balik.
Pemeriksaan Singkat
Bagaimana komponen induk membaca data peristiwa?
Ringkasan
Gunakan createEventDispatcher untuk mengirimkan peristiwa bernama dengan muatan detail, lalu dengarkan dengan on:eventName.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peristiwa Kustom dengan createEventDispatcher” gratis?
Ya — teks lengkap “Peristiwa Kustom dengan createEventDispatcher” 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 “Peristiwa Kustom dengan createEventDispatcher”?
Kirim peristiwa kustom bertipe dari komponen anak agar ditangani komponen induk. 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 3 dari 4.
Berapa lama pelajaran “Peristiwa Kustom dengan createEventDispatcher” 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
- on:click on:input on:submit
- Pengubah Peristiwa: preventDefault stopPropagation once
- Peristiwa Kustom dengan createEventDispatcher
- Meneruskan Peristiwa dengan on:click