面试题：Svelte模块化开发中context="module"的基础应用

Question

在Svelte模块化开发里，context="module"主要解决什么问题？请举例说明如何在一个简单的Svelte组件中使用context="module"来实现模块间数据的传递。

Answer 1

1. context="module"解决的问题

在Svelte模块化开发中，context="module"主要用于在模块之间共享数据和状态，而无需通过组件的props层层传递数据。这在组件层级较深，或者多个组件需要访问相同数据的场景下非常有用，避免了繁琐的props传递。

2. 示例

假设有一个简单的Svelte应用，包含一个父组件App.svelte和两个子组件Child1.svelte与Child2.svelte。我们要在Child1.svelte和Child2.svelte之间共享数据。

App.svelte

<script>
    import Child1 from './Child1.svelte';
    import Child2 from './Child2.svelte';
</script>

<Child1 />
<Child2 />

Child1.svelte

<script context="module">
    let sharedData = '初始数据';
    function updateSharedData(newData) {
        sharedData = newData;
    }
    export { sharedData, updateSharedData };
</script>

<button on:click={() => updateSharedData('更新后的数据')}>更新数据</button>

Child2.svelte

<script context="module">
    import { sharedData } from './Child1.svelte';
</script>

<p>共享数据: {sharedData}</p>

在上述示例中，Child1.svelte通过context="module"定义了共享数据sharedData和更新它的函数updateSharedData，并通过export导出。Child2.svelte则通过import导入Child1.svelte中导出的sharedData，从而实现了模块间的数据共享。