跳至主要內容

一般而言,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>