Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

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

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

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

App
<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>