在 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 的组件通信机制：
- 父组件向子组件传递数据：使用
props传递数据。 - 子组件向父组件传递数据：通过
dispatch分发自定义事件，父组件通过on:事件名监听事件。
掌握了这些基础知识后，您可以更灵活地实现父子组件之间的双向数据流动。这是构建复杂应用的基础，在实际开发中非常实用。