面试题：Svelte中如何利用上下文API实现父子组件简单数据传递

Question

请描述在Svelte中使用上下文API进行父子组件通信时，`setContext`和`getContext`函数的基本使用方法，并给出一个简单示例，展示父组件如何通过上下文API向子组件传递一个字符串数据。

Answer 1

1. setContext和getContext基本使用方法：
   • setContext：
     • 在Svelte中，setContext函数用于在父组件中设置上下文数据。它接受两个参数，第一个参数是一个唯一的标识符（通常是一个字符串），用于在子组件中获取上下文数据时进行匹配；第二个参数是要传递的数据。该函数一般在父组件的脚本部分（<script>标签内）调用。
   • getContext：
     • getContext函数用于在子组件中获取父组件设置的上下文数据。它接受一个参数，即与setContext中使用的相同的唯一标识符。调用getContext函数会返回通过setContext设置的数据。该函数一般在子组件的脚本部分调用。
2. 示例：
   • 父组件（例如Parent.svelte）：

<script>
    import Child from './Child.svelte';
    import { setContext } from'svelte';
    const contextKey = 'data - key';
    const dataToPass = 'Hello from parent';
    setContext(contextKey, dataToPass);
</script>

<Child />

• 子组件（例如Child.svelte）：

<script>
    import { getContext } from'svelte';
    const contextKey = 'data - key';
    const receivedData = getContext(contextKey);
</script>

<p>{receivedData}</p>

在这个示例中，父组件Parent.svelte使用setContext通过contextKey设置了一个字符串数据Hello from parent。子组件Child.svelte通过相同的contextKey使用getContext获取到了这个字符串数据，并在<p>标签中显示出来。