DOM 要素のプロパティにバインドできるのと同様に、コンポーネントの props にもバインドできます。例えば、フォーム要素のように <Keypad> コンポーネントの value prop にバインドすることができます。
App.svelte
<Keypad
bind:value={pin}
on:submit={handleSubmit}
/>これで、ユーザがキーパッドを操作すると、親コンポーネントの pin の値が即座に更新されるようになりました。
コンポーネントバインディングは控えめに使用してください。それらが多すぎるとアプリケーションの周りのデータの流れを追跡するのが困難になります。特に「信頼できる唯一の情報源(single source of truth)」が存在しない場合には。
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}/>