面试题：Svelte组件间复杂通信场景下Props与事件派发处理

Question

假设有一个多层嵌套的Svelte组件结构，最内层子组件需要将一个特定事件的发生通知到最外层父组件，同时中间层组件可能会对这个通知进行一些处理，并且最外层父组件要基于内层子组件传递的数据做一些状态更新，你将如何利用Props和事件派发机制来实现这个功能？请详细阐述实现思路并给出关键代码片段。

Answer 1

1. 实现思路：
   • 事件派发：最内层子组件通过createEventDispatcher创建事件派发器，当特定事件发生时，使用该派发器派发事件，并携带需要传递的数据。
   • 中间层处理：中间层组件接收内层子组件派发的事件，在处理函数中可以根据需求对数据进行处理，然后再次派发事件给它的父组件。
   • 最外层更新：最外层父组件接收中间层组件派发的事件，在事件处理函数中根据传递的数据更新自身状态。
2. 关键代码片段：
   • 最内层子组件（Inner.svelte）：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function handleInnerEvent() {
        const data = { message: 'Inner event occurred' };
        dispatch('inner - event', data);
    }
</script>

<button on:click={handleInnerEvent}>触发内层事件</button>

• 中间层组件（Middle.svelte）：

<script>
    import Inner from './Inner.svelte';
    const handleInner = (e) => {
        let newData = { ...e.detail, processed: true };
        const dispatch = createEventDispatcher();
        dispatch('middle - event', newData);
    };
</script>

<Inner on:inner - event={handleInner} />

• 最外层父组件（Outer.svelte）：

<script>
    import Middle from './Middle.svelte';
    let outerData;
    const handleMiddle = (e) => {
        outerData = e.detail;
    };
</script>

<Middle on:middle - event={handleMiddle} />

{#if outerData}
    <p>接收到的数据: {JSON.stringify(outerData)}</p>
{/if}