当前位置：首页 > article >正文

【前端】Svelte：组件间通信

article 2024/11/13 13:50:41

在 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>