面试题：Svelte中如何通过Context API与事件派发实现父子组件间的数据共享与通信

Question

请描述在Svelte中使用Context API与事件派发相结合，来实现父子组件之间数据共享与通信的基本步骤，并给出一个简单的代码示例，包含父组件如何设置上下文数据以及子组件如何接收并通过事件反馈数据。

Answer 1

1. 基本步骤：
   • 设置上下文数据：在父组件中使用 setContext 函数来设置上下文数据。setContext 函数来自 svelte/store。
   • 接收上下文数据：子组件通过 getContext 函数来获取父组件设置的上下文数据。同样，getContext 函数也来自 svelte/store。
   • 事件派发：子组件可以通过 createEventDispatcher 创建一个事件派发器，然后使用该派发器向父组件发送事件，父组件可以监听这些事件来获取子组件反馈的数据。
2. 代码示例：
   • 父组件（App.svelte）：

<script>
    import { setContext } from'svelte/store';
    import Child from './Child.svelte';
    const sharedData = { message: 'Hello from parent' };
    setContext('sharedContext', sharedData);
    const handleChildEvent = (data) => {
        console.log('Received from child:', data);
    };
</script>

<Child on:childEvent={handleChildEvent}/>

• 子组件（Child.svelte）：

<script>
    import { getContext } from'svelte/store';
    const sharedContext = getContext('sharedContext');
    const dispatch = createEventDispatcher();
    const sendDataToParent = () => {
        const dataToSend = { response: 'Hello from child' };
        dispatch('childEvent', dataToSend);
    };
</script>

<button on:click={sendDataToParent}>Send data to parent</button>
<p>{sharedContext.message}</p>