就像你可以绑定到 DOM 元素的属性一样，你也可以绑定到组件的 Props。例如，我们可以将此 <Keypad> 组件的 value Props 绑定，就像它是一个表单元素一样。
首先，我们需要将 Props 标记为可绑定。在 Keypad.svelte 中，更新 $props() 声明以使用 $bindable 符文
Keypad
let { value = $bindable(''), onsubmit } = $props();然后，在 App.svelte 中，添加一个 bind: 指令
App
<Keypad bind:value={pin} {onsubmit} />现在，当用户与键盘交互时，父组件中 pin 的值会立即更新。
谨慎使用组件绑定。如果绑定过多，尤其是在没有“单一事实来源”的情况下，可能会难以跟踪应用程序中的数据流。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
import Keypad from './Keypad.svelte';
let pin = $state('');let view = $derived(pin
? pin.replace(/\d(?!$)/g, '•')
: 'enter your pin');
function onsubmit() { alert(`submitted ${pin}`);}
</script>
<h1 style="opacity: {pin ? 1 : 0.4}"> {view}</h1>
<Keypad {onsubmit} />