一般来说,Svelte 中的数据流是自上而下的——父组件可以为子组件设置 props,组件可以为元素设置属性,但反过来不行。
有时打破这条规则很有用。以这个组件中的 <input>
元素为例——我们可以添加一个 oninput
事件处理程序,将 name
的值设置为 event.target.value
,但这有点... 冗长。正如我们即将看到的,对于其他表单元素来说,情况会变得更糟。
相反,我们可以使用 bind:value
指令
应用
<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>