Svelte Props Events Export Let Createeventdispatcher Bind

Definisi

Komponen child menerima data lewat props (export let) dan mengembalikan sinyal ke parent lewat events (createEventDispatcher) atau langsung bind ke prop (two-way).

Kapan dipakai

• Props: kirim data satu arah parent → child.
• Event dispatcher: child perlu memberi tahu parent (klik, submit, selesai).
• bind:prop: child boleh mengubah nilai milik parent (gunakan hati-hati).

Cara kerja

Props

svelte

<!-- Child.svelte -->
<script>
  export let title = "Default";
  export let items = [];
</script>
 
<h2>{title}</h2>

svelte

<!-- Parent -->
<Child title="Halo" items={['a','b']} />

Event ke parent

svelte

<!-- Child -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function submit() {
    dispatch('done', { ok: true });
  }
</script>
 
<button on:click={submit}>Selesai</button>

svelte

<!-- Parent -->
<Child on:done={(e) => console.log(e.detail)} />

Two-way bind

svelte

<!-- Child -->
<script>
  export let value = '';
</script>
<input bind:value />
 
<!-- Parent -->
<Child bind:value={nama} />

Struktur alur

Catatan implementasi

• export let dengan default nilai jadi opsional prop.
• dispatch(nama, payload) → parent baca di event.detail.
• bind: hanya untuk prop yang memang boleh diubah child; jangan pakai untuk data yang harus dijaga parent.
• Di Svelte 5, export let bergeser ke let { title } = $props() (runes); pola di atas masih valid di Svelte 4.

Kesalahan umum

• Mengubah prop langsung tanpa bind: parent tidak tahu, UI parent stale.
• Lupa event.detail: payload ada di .detail, bukan di event langsung.
• Over-bind: terlalu banyak two-way membuat alur data sulit dilacak.
• Nama event bentrok: pakai nama deskriptif (save, close), bukan click.

Referensi terkait

• Svelte Component Syntax: markup, script, style scoped
• Svelte Stores: writable, readable, derived, custom
• React Props & State, Render Flow