Memahami bind:value Antara Parent dan Child di Svelte

Salah satu fitur keren di Svelte adalah two-way binding dengan bind:value.
Dengan binding ini, data di parent dan child component bisa saling sinkron secara otomatis tanpa perlu kode boilerplate.

Mari kita lihat contoh sederhana dengan membuat input field yang terhubung antara parent dan child.

1. Child Component: InputField.svelte

Buat file src/lib/components/InputField.svelte:

<script lang="ts">
    export let value: string = "";
</script>
  
<h2>Child Component</h2>
<input type="text" bind:value />
<p>Isi input (child): {value}</p>

Penjelasan:

• export let value → mendeklarasikan prop value yang bisa diisi dari parent.
• bind:value → membuat input otomatis update value dan sebaliknya.
• {value} → menampilkan isi input langsung dari sisi child.

2. Parent Component: +page.svelte

Sekarang buka file src/routes/+page.svelte:

<script lang="ts">
	import InputField from '$lib/components/InputField.svelte';
  
	let name: string = "";
</script>
  
<h1>bind:value</h1>
  
<InputField bind:value={name} />
  
<p>Isi dari parent: {name}</p>

Penjelasan:

• let name = "" → state di parent.
• <InputField bind:value={name} /> → menghubungkan name di parent dengan value di child.
• Jika user mengetik di input child → otomatis update name di parent.
• Jika name di parent berubah → input di child ikut berubah.

3. Hasil

Saat aplikasi dijalankan:

1. Anda mengetik sesuatu di input field (child). → Teks langsung muncul di child dan di parent.
2. Jika parent mengubah variabel name, maka input child otomatis mengikuti.

Dengan kata lain, bind:value membuat two-way binding antara parent dan child jadi sangat sederhana.

Kesimpulan

Konsep bind:value di Svelte:

• Child cukup export let value dan gunakan bind:value di <input>.
• Parent cukup memanggil child dengan bind:value={state}.
• Tidak perlu bikin event on:input manual untuk sinkronisasi data.

Fitur ini membuat komunikasi antara parent-child di Svelte lebih ringkas dibanding framework lain yang biasanya butuh banyak boilerplate.