面试题：Svelte自定义事件在复杂组件嵌套结构中的通信实现

Question

假设有一个多层嵌套的Svelte组件结构（A -> B -> C），现在C组件需要向A组件传递一个自定义事件数据，你将如何实现这种跨层的事件通信？请详细阐述思路并给出代码示例。

Answer 1

思路

1. 在Svelte中，可以利用 createEventDispatcher 来创建事件分发器。
2. 从A组件开始，将一个处理函数作为prop传递给B组件，B组件再将这个函数作为prop传递给C组件。
3. C组件通过事件分发器触发事件，并传递数据，这个事件最终由A组件的处理函数来接收和处理。

代码示例

1. A.svelte

<script>
    import B from './B.svelte';
    const handleCustomEvent = (data) => {
        console.log('Received data from C:', data);
    };
</script>

<B onCustomEvent={handleCustomEvent} />

2. B.svelte

<script>
    import C from './C.svelte';
    export let onCustomEvent;
</script>

<C onCustomEvent={onCustomEvent} />

3. C.svelte

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    const sendData = () => {
        const data = { message: 'Hello from C' };
        dispatch('customEvent', data);
    };
</script>

<button on:click={sendData}>Send data to A</button>