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