Skip to main content

就如同你可以绑定到 DOM 元素的属性一样，你也可以绑定到组件的属性（props）。比如说，我们可以绑定到 <Keypad> 组件的 value 属性上，就如同它是一个表单元素一样：

App.svelte
<Keypad
	bind:value={pin}
	on:submit={handleSubmit}
/>

现在，当用户在键盘上输入时，父组件中 pin 的值会立刻更新。

不要用太多组件绑定，因为这样会很难追踪应用的数据流，特别是某些值可能会被多个地方更改时。

Next: 绑定到组件实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
	import Keypad from './Keypad.svelte';
 
	let pin;
	$: view = pin
		? pin.replace(/\d(?!$)/g, '•')
		: 'enter your pin';
 
	function handleSubmit() {
		alert(`submitted ${pin}`);
	}
</script>
 
<h1 style="opacity: {pin ? 1 : 0.4}">
	{view}
</h1>
 
<Keypad
	on:submit={handleSubmit}
/>
initialising