Svelte 事件轉(zhuǎn)發(fā)

與 DOM 事件不同， 組件事件不會 冒泡（bubble） ，如果你想要在某個深層嵌套的組件上監(jiān)聽事件，則中間組件必須 轉(zhuǎn)發(fā)（forward） 該事件。

這種情況，我們有類似的App.svelte和 Inner.svelte 在 前面章節(jié)，但是現(xiàn)在多出一個 Outer.svelte來包含 <Inner/>。

解決這個問題的方法之一是添加 createEventDispatcher 到 Outer.svelte中，監(jiān)聽其 message 事件，并為它創(chuàng)建一個轉(zhuǎn)發(fā)程序：

<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 設(shè)立了一個簡寫屬性 on:message。 message 沒有賦予特定的值得情況下意味著轉(zhuǎn)發(fā)所有massage事件：

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

<Inner on:message/>