Tương tự như bạn có thể bind thuộc tính của phần tử DOM, bạn cũng có thể bind props của component. Ví dụ, chúng ta có thể bind prop value của component <Keypad> như là một phần tử biểu mẫu:
App.svelte
<Keypad
bind:value={pin}
on:submit={handleSubmit}
/>Bây giờ, khi người dùng tương tác với bàn phím, giá trị của pin trong component cha sẽ được cập nhật ngay lập tức.
Hãy sử dụng phép bind với component một cách cẩn thận. Nó có thể khiến bạn khó theo dõi luồng dữ liệu trong ứng dụng nếu có quá nhiều phép bind, đặc biệt là nếu không có 'nguồn đáng tin cậy duy nhất' (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, '•')
: 'nhập mã pin';
function handleSubmit() { alert(`đã gửi: ${pin}`);}
</script>
<h1 style="opacity: {pin ? 1 : 0.4}"> {view}</h1>
<Keypad
on:submit={handleSubmit}/>