DOM要素のプロパティにバインドできるのと同様に、コンポーネントのプロップスにバインドできます。たとえば、この<Keypad>コンポーネントの`value`プロップスを、フォーム要素のようにバインドできます。

まず、プロップスをバインド可能としてマークする必要があります。`Keypad.svelte`内で、`$props()`宣言を`$bindable`ルーンを使用して更新します。

let { value = $bindable(''), onsubmit } = $props();

次に、`App.svelte`に`bind:`ディレクティブを追加します。

<Keypad bind:value={pin} {onsubmit} />

これで、ユーザーがキーパッドを操作すると、親コンポーネントの`pin`の値がすぐに更新されます。

コンポーネントバインディングは控えめに使用してください。特に「単一の情報源」がない場合、数が多すぎるとアプリケーション全体でのデータの流れを追跡するのが困難になる可能性があります。