Bindings

原則、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティをセットできますし、コンポーネントは要素に属性をセットできますが、その逆はできません。

時々、そのルールを破ると便利なことがあります。このコンポーネントの<input>要素の例で考えてみましょう。on:inputイベントハンドラを追加して、nameの値をevent.target.valueに設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。

代わりに、bind:valueを使用することができます。

<input bind:value={name}>

これはnameの値が変更されるとinputの値が更新されるだけでなく、inputの値が変更されるとnameの値が更新されることを意味します。



		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...