面试题：Svelte中context如何在模块化组件中使用

Question

请描述在Svelte中，如何通过context在不同层级的模块化组件间共享数据，并且举例说明在父子组件及非直接父子组件间传递数据的具体实现步骤。

Answer 1

1. 在Svelte中使用context共享数据的原理
   • Svelte提供了setContext和getContext函数来在组件树中共享数据。setContext用于设置一个上下文键值对，getContext用于获取该上下文数据。
2. 父子组件间传递数据的实现步骤
   • 父组件设置上下文数据：

     <!-- Parent.svelte -->
     <script>
       import { setContext } from'svelte';
       const sharedData = { message: 'Hello from parent' };
       setContext('shared - key', sharedData);
     </script>
     <h1>Parent Component</h1>
     <Child />
     

   • 子组件获取上下文数据：

     <!-- Child.svelte -->
     <script>
       import { getContext } from'svelte';
       const sharedData = getContext('shared - key');
     </script>
     <p>{sharedData.message}</p>
     

3. 非直接父子组件间传递数据的实现步骤
   • 祖先组件设置上下文数据：

     <!-- Ancestor.svelte -->
     <script>
       import { setContext } from'svelte';
       const sharedValue = 42;
       setContext('shared - num - key', sharedValue);
     </script>
     <h1>Ancestor Component</h1>
     <Descendant />
     

   • 后代组件获取上下文数据：

     <!-- Descendant.svelte -->
     <script>
       import { getContext } from'svelte';
       const sharedNumber = getContext('shared - num - key');
     </script>
     <p>The shared number is: {sharedNumber}</p>
     

   • 在这个例子中，Ancestor.svelte通过setContext设置了上下文数据，Descendant.svelte（它可能是Ancestor.svelte的多级后代组件）通过getContext获取了该上下文数据，实现了非直接父子组件间的数据传递。