面试题：Svelte自定义事件与组件通信

Question

假设有一个多层嵌套的Svelte组件结构，子组件需要向祖父组件传递一个自定义事件数据，在不使用全局状态管理库的情况下，如何高效地实现这一过程？请详细说明思路并给出关键代码。

Answer 1

1. 思路：
   • 在Svelte中，通常事件是从子组件向父组件传递。对于子组件向祖父组件传递事件数据，我们可以通过在中间层组件进行事件转发来实现。
   • 子组件触发自定义事件，中间层组件监听这个事件，然后中间层组件再触发另一个自定义事件将数据传递给祖父组件。
2. 关键代码：
   • 子组件（Child.svelte）：

<script>
    const dataToSend = { message: 'Hello, Grandparent!' };
    const sendDataToParent = () => {
        const event = new CustomEvent('child - event', { detail: dataToSend });
        this.dispatchEvent(event);
    };
</script>

<button on:click={sendDataToParent}>Send data to grandparent</button>

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

<script>
    const forwardDataToGrandparent = (event) => {
        const newEvent = new CustomEvent('middle - event', { detail: event.detail });
        this.dispatchEvent(newEvent);
    };
</script>

<Child on:child - event={forwardDataToGrandparent} />

• 祖父组件（Grandparent.svelte）：

<script>
    const handleDataFromChild = (event) => {
        console.log('Received data from child:', event.detail);
    };
</script>

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

这里假设Child.svelte、Middle.svelte和Grandparent.svelte是相应的组件文件。在Grandparent.svelte中可以处理从Child.svelte传递过来的数据。