面试题：Svelte中Context API的基本使用

Question

请描述在Svelte中如何使用Context API实现父组件向深层子组件传递数据，假设父组件有一个字符串类型的数据 'message'，需要传递给多层嵌套的子组件，写出关键代码示例。

Answer 1

1. 安装setContext和getContext：
   • 在Svelte中，setContext和getContext是用于Context API的关键函数，它们在'svelte/store'模块中。
2. 父组件代码示例：

   <!-- Parent.svelte -->
   <script>
     import { setContext } from'svelte/store';
     const message = 'Hello, this is the message';
     setContext('messageContext', message);
   </script>
   
   <Child />
   

3. 深层子组件代码示例：

   <!-- DeepChild.svelte -->
   <script>
     import { getContext } from'svelte/store';
     const message = getContext('messageContext');
   </script>
   
   <p>{message}</p>
   

   • 这里假设Child组件会最终渲染DeepChild.svelte组件，通过setContext在父组件中设置上下文数据，子组件通过getContext获取该数据，实现了父组件向深层子组件传递数据。注意，messageContext是自定义的上下文标识符，可以根据实际情况命名。