就像你可以绑定到 DOM 元素的属性一样，你也可以绑定到组件的属性（props）。例如，我们可以像绑定表单元素一样绑定这个 <Keypad> 组件的 value 属性。
首先，我们需要将这个属性标记为_可绑定的_。在 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} />