事件 / 事件转发 • Svelte Tutorial

跟 DOM 事件不同，组件事件不会冒泡。如果你想监听更深层嵌套的组件的事件，就得让中间组件来转发事件。

在本例中，我们有跟上一节中相同的 App.svelte 和 Inner.svelte 文件，但是现在 <Inner/> 被嵌套在 Outer.svelte 组件中。

其中一个可以解决问题的办法是在 Outer.svelte 中添加 createEventDispatcher，来监听 message 事件，然后创建处理器来处理：

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}/>

但这样要写老多代码，因此 Svelte 允许我们使用简写：一个没有值的事件标志 on:message 表示转发所有 message 事件。

Outer.svelte

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

<Inner on:message/>

Next: DOM 事件转发

<script>

	import Outer from './Outer.svelte';

	function handleMessage(event) {

		alert(event.detail.text);

</script>

<Outer on:message={handleMessage} />

initialising