通常来说,Svelte 中的数据流是自上而下的 — 父组件可以为子组件设置 props,组件可以为元素设置属性,但反过来则不行。
有时打破这个规则是有用的。以这个组件中的 <input> 元素为例 — 我们可以添加一个 oninput 事件处理程序,将 name 的值设置为 event.target.value,但这有点... 模板化。对于其他表单元素来说,情况会变得更糟糕,我们稍后会看到。
相反,我们可以使用 bind:value 指令:
App
<input bind:value={name}>这意味着不仅 name 值的改变会更新输入值,输入值的改变也会更新 name。
1
2
3
4
5
6
7
8
<script>
let name = $state('world');</script>
<input value={name} /><h1>Hello {name}!</h1>