【前端】Svelte：组件间通信

在 Svelte 中，组件间的通信主要通过 props 和事件机制来实现。父组件可以向子组件传递数据，子组件也可以通过事件将信息反馈给父组件。在本教程中，我们将深入了解 Svelte 的组件通信机制，包括 props 和事件的使用方法、事件监听、dispatch 事件分发机制等。

父组件向子组件传递数据：使用 props

在 Svelte 中，父组件可以通过 props（属性）向子组件传递数据。在子组件中，通过 export 声明的变量可以接收从父组件传递的数据。

定义一个接收 props 的子组件

假设我们有一个 Child.svelte 组件，用于显示父组件传递的 message：

<!-- Child.svelte -->
<script>export let message;
</script><div><p>Message from parent: {message}</p>
</div>

在这个例子中，子组件 Child 使用 export let message; 声明了一个可接收 props 的变量 message，用于接收父组件传递的数据。

在父组件中传递数据到子组件

现在在父组件 Parent.svelte 中使用 Child 组件，并向其传递 message：

<!-- Parent.svelte -->
<script>import Child from './Child.svelte';let parentMessage = 'Hello from Parent!';
</script><Child message={parentMessage} />

父组件中的 parentMessage 变量通过 message={parentMessage} 传递给子组件。在子组件中，message 将接收父组件的值并在页面上显示。

子组件向父组件传递数据：事件分发与监听

在 Svelte 中，子组件可以通过事件将信息传递给父组件。Svelte 提供了 createEventDispatcher 函数，用于在子组件中分发自定义事件。父组件可以使用 on:事件名 来监听该事件。

使用 dispatch 事件分发

首先，在 Child.svelte 中导入 createEventDispatcher，并使用 dispatch 来分发事件。

<!-- Child.svelte -->
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function sendMessage() {dispatch('message', { text: 'Hello from Child!' });}
</script><button on:click={sendMessage}>Send Message to Parent</button>

在 Child.svelte 中，我们使用 createEventDispatcher 创建了一个事件分发器 dispatch。dispatch 接收事件名称 'message' 和一个数据对象 { text: 'Hello from Child!' }，用来向父组件发送自定义事件 message。

在父组件中监听子组件的事件

在父组件 Parent.svelte 中，我们可以使用 on:message 监听来自 Child 组件的 message 事件。

<!-- Parent.svelte -->
<script>import Child from './Child.svelte';let receivedMessage = '';function handleMessage(event) {receivedMessage = event.detail.text;}
</script><Child on:message={handleMessage} /><p>Message from child: {receivedMessage}</p>

在 Parent.svelte 中，handleMessage 函数用于处理 message 事件。事件对象 event 的 detail 属性包含子组件通过 dispatch 传递的数据。receivedMessage 变量会更新为子组件的消息，页面会显示更新后的内容。

父子组件数据同步示例

以下是一个父子组件交互的完整示例。父组件向子组件传递一个 count，子组件有一个按钮可以增加 count，并通过事件将更新后的 count 返回给父组件。

3.1 子组件的实现

子组件 Counter.svelte 通过 props 接收 count，并通过事件分发将更新的 count 传回父组件。

<!-- Counter.svelte -->
<script>import { createEventDispatcher } from 'svelte';export let count;const dispatch = createEventDispatcher();function increment() {count += 1;dispatch('update', { newCount: count });}
</script><button on:click={increment}>Increment</button>
<p>Current count: {count}</p>

3.2 父组件的实现

父组件 App.svelte 传递 count 到子组件并监听 update 事件来接收更新后的 count。

<!-- App.svelte -->
<script>import Counter from './Counter.svelte';let parentCount = 0;function handleUpdate(event) {parentCount = event.detail.newCount;}
</script><Counter count={parentCount} on:update={handleUpdate} />
<p>Count in parent: {parentCount}</p>

在这个示例中，parentCount 的值会随着子组件的按钮点击事件而更新，保持父子组件间的同步。

组件通信机制总结

通过以上教程，我们学习了 Svelte 的组件通信机制：

1. 父组件向子组件传递数据：使用 props 传递数据。
2. 子组件向父组件传递数据：通过 dispatch 分发自定义事件，父组件通过 on:事件名 监听事件。

掌握了这些基础知识后，您可以更灵活地实现父子组件之间的双向数据流动。这是构建复杂应用的基础，在实际开发中非常实用。