Skip to main content

Không như sự kiện của DOM, sự kiện từ component không bubble. Nếu bạn muốn lắng nghe một sự kiện trên component lồng sâu bên trong, các component trung gian phải chuyển tiếp (forward) sự kiện đó.

Trong trường hợp này, chúng ta có App.svelte và Inner.svelte trong phần trước, và bây giờ ta có component Outer.svelte chứa <Inner/>.

Một cách mà ta có thể giải là thêm createEventDispatcher vào Outer.svelte, nghe sự kiện message, và tạo một hàm xử lý cho nó:

Outer.svelte
<script>
	import Inner from './Inner.svelte';
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function forward(event) {
		dispatch('message', event.detail);
	}
</script>

<Inner on:message={forward}/>

Nhưng bạn phải viết khá nhiều code cho việc này, cho nên Svelte có một cách viết tắt - một chỉ thị (directive) on:message khi không có giá trị thì nó có nghĩa là "chuyển tiếp tất cả sự kiện có tên message".

Outer.svelte
<script>
	import Inner from './Inner.svelte';
</script>

<Inner on:message/>

Tiếp theo: DOM event forwarding

1
2
3
4
5
6
7
8
9
10
<script>
	import Outer from './Outer.svelte';
 
	function handleMessage(event) {
		alert(event.detail.text);
	}
</script>
 
<Outer on:message={handleMessage} />
initialising