Svelte多级事件转发问题：createEventDispatcher事件无法多级传递

在Svelte中，通过createEventDispatcher派发的自定义事件默认不会像DOM原生事件那样自动冒泡，所以当Outer组件处理了Inner派发的message事件后，事件不会自动传递到App组件。要实现多级传递，有两种简单的方式：

方式一：手动再次派发事件 #

在Outer组件的事件处理函数中，完成自身逻辑后，再用createEventDispatcher把事件重新派发给上层组件：

修改后的Outer.svelte：

<script>
    import Inner from './Inner.svelte';
    import { createEventDispatcher } from 'svelte';
    
    const dispatch = createEventDispatcher();
    function handleMessage(event) {
        console.log(event.detail.text);
        // 将事件转发给上层组件
        dispatch('message', event.detail);
    }
</script>

<Inner on:message={handleMessage}/>

方式二：使用事件转发语法 #

Svelte支持直接通过on:eventName（不带处理函数）的语法自动转发事件，如果你需要同时在Outer组件处理事件并转发，可以同时声明处理函数和转发规则：

修改后的Outer.svelte：

<script>
    import Inner from './Inner.svelte';
    
    function handleMessage(event) {
        console.log(event.detail.text);
    }
</script>

<!-- 同时处理事件并自动转发给上层 -->
<Inner on:message={handleMessage} on:message/>

注意事项 #

你的App.svelte中handleMessage函数里使用了event.detail.value，但Inner派发的事件字段是text，需要修正为event.detail.text才能正常弹出内容：

修改后的App.svelte：

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

    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>

<Outer on:message={handleMessage}/>

内容的提问来源于stack exchange，提问作者sly