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

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

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

解決這個(gè)問題的方法之一是添加 createEventDispatcher 到 Outer.svelte中，監(jiān)聽其 message 事件，并為它創(chuàng)建一個(gè)轉(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è)立了一個(gè)簡(jiǎn)寫屬性 on:message。 message 沒有賦予特定的值得情況下意味著轉(zhuǎn)發(fā)所有massage事件：

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

<Inner on:message/>