Props

Understanding bind:value Between Parent and Child Components in Svelte

One convenient Svelte feature is two-way binding with bind:value. It can keep state in a parent component synchronized with a value exposed by a child component without writing separate event-handling boilerplate. The following example connects a reusable input component to state in its parent. 1. Child Component: InputField.svelte Create src/lib/components/InputField.svelte: <script lang="ts"> export let value: string = ""; </script> <h2>Child Component</h2> <input type="text" bind:value /> <p>Input value in child: {value}</p> How it works: