面试题：Svelte中Props、Context API与事件派发的复杂应用

Question

假设有一个多层嵌套的Svelte组件结构，顶层组件通过Props传递数据到中间层组件，中间层组件需要借助Context API将部分数据传递给深层组件，并且深层组件要通过事件派发将处理后的数据返回给顶层组件。请描述实现该场景的思路，并给出关键代码片段。

Answer 1

实现思路

1. 顶层组件传递数据：顶层组件通过 props 将数据传递给中间层组件。
2. 中间层组件使用Context API：中间层组件借助Svelte的 setContext 将部分数据提供给深层组件。
3. 深层组件事件派发：深层组件使用 createEventDispatcher 创建事件派发器，将处理后的数据通过事件传递出去，中间层组件捕获并传递给顶层组件。

关键代码片段

1. 顶层组件（App.svelte）

<script>
    import MiddleComponent from './MiddleComponent.svelte';
    let dataFromDeep = '';
    const handleDataFromDeep = (e) => {
        dataFromDeep = e.detail;
    };
</script>

<MiddleComponent {dataToPass} on:dataFromDeep={handleDataFromDeep}/>

2. 中间层组件（MiddleComponent.svelte）

<script>
    import { setContext } from'svelte';
    import DeepComponent from './DeepComponent.svelte';
    export let dataToPass;
    setContext('contextData', dataToPass);
    const handleDataFromDeep = (e) => {
        this.dispatchEvent(new CustomEvent('dataFromDeep', { detail: e.detail }));
    };
</script>

<DeepComponent on:dataFromDeep={handleDataFromDeep}/>

3. 深层组件（DeepComponent.svelte）

<script>
    import { getContext } from'svelte';
    const contextData = getContext('contextData');
    const dispatch = createEventDispatcher();
    const handleClick = () => {
        // 处理数据
        const processedData = contextData +'processed';
        dispatch('dataFromDeep', processedData);
    };
</script>

<button on:click={handleClick}>Dispatch Data</button>