原則、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティをセットできますし、コンポーネントは要素に属性をセットできますが、その逆はできません。
時々、そのルールを破ると便利なことがあります。このコンポーネントの<input>
要素の例で考えてみましょう。on:input
イベントハンドラを追加して、name
の値をevent.target.value
に設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。
代わりに、bind:value
を使用することができます。
App.svelte
<input bind:value={name}>
これはname
の値が変更されるとinputの値が更新されるだけでなく、inputの値が変更されるとname
の値が更新されることを意味します。