Basic Svelte
Bindings
Classes and styles
Attachments
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
原則、Svelteのデータフローはトップダウンです。親コンポーネントは子コンポーネントにプロパティをセットできますし、コンポーネントは要素に属性をセットできますが、その逆はできません。
時々、そのルールを破ると便利なことがあります。このコンポーネントの <input> 要素の例で考えてみましょう。oninput イベントハンドラを追加して、name の値を event.target.value に設定できますが、それは少し…面倒(boilerplatey)です。想像がつくと思いますが、他のフォーム要素ではそれがさらに悪化します。
代わりに、bind:value ディレクティブを使用することができます。
App
<input bind:value={name}>This means that as well as changes to name updating the <input>, changes to the <input> will update name.
previous next
1
2
3
4
5
6
7
8
<script>
let name = $state('world');</script>
<input value={name} /><h1>Hello {name}!</h1>