跳至主要内容

一般来说,Svelte 中的数据流是自上而下的——父组件可以为子组件设置 props,组件可以为元素设置属性,但反过来不行。

有时打破这条规则很有用。以这个组件中的 <input> 元素为例——我们可以添加一个 oninput 事件处理程序,将 name 的值设置为 event.target.value,但这有点... 冗长。正如我们即将看到的,对于其他表单元素来说,情况会变得更糟。

相反,我们可以使用 bind:value 指令

应用
<input bind:value={name}>

这意味着,不仅 name 值的变化会更新输入值,而且输入值的变化也会更新 name

在 GitHub 上编辑此页面

上一个 下一个
1
2
3
4
5
6
7
8
<script>
	let name = $state('world');
</script>
 
<input value={name} />
 
<h1>Hello {name}!</h1>