通常来说,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>