MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte事件派发实战：自定义事件与数据传递

2022-01-137.5k 阅读

Svelte 事件系统基础回顾

在深入探讨自定义事件与数据传递之前，我们先来回顾一下 Svelte 中基本的事件绑定机制。在 Svelte 中，与 DOM 元素进行事件交互是非常直观的。例如，对于一个按钮元素，我们可以轻松绑定 click 事件：

<script>
  function handleClick() {
    console.log('Button clicked!');
  }
</script>

<button on:click={handleClick}>Click me</button>

这里，on:click 语法将 handleClick 函数绑定到按钮的点击事件上。当按钮被点击时，handleClick 函数就会被执行。这种基础的事件绑定适用于大多数常见的 DOM 事件，如 mousedown、keyup 等。

Svelte 还支持修饰符来进一步定制事件的行为。比如 on:click|preventDefault 可以阻止按钮点击时的默认行为（例如，对于链接按钮阻止其跳转）：

<script>
  function handleClick() {
    console.log('Button clicked, default action prevented');
  }
</script>

<a href="#" on:click|preventDefault={handleClick}>Click me</a>

这些修饰符可以链式使用，如 on:submit|preventDefault|stopPropagation，分别实现阻止默认提交行为和停止事件冒泡。

自定义事件的概念与需求

虽然 Svelte 原生提供了丰富的 DOM 事件绑定，但在实际开发中，我们经常会遇到需要组件间通信的情况，这时候自定义事件就显得尤为重要。自定义事件允许我们在组件内部定义特定的事件，然后在组件使用的地方监听这些事件。

比如，我们有一个复杂的表单组件，当用户完成特定步骤后，我们希望父组件能够知晓并做出相应的处理。这时候，表单组件就可以派发一个自定义事件，告知父组件操作已完成。再比如，在一个拖放组件中，当某个元素成功被放置到目标区域时，我们可以通过自定义事件将放置的元素信息传递给父组件。

自定义事件不仅可以增强组件的可复用性和灵活性，还能使组件间的通信更加清晰和可控。通过自定义事件，我们可以将组件内部的状态变化或特定操作告知外部组件，实现组件间的松耦合。

创建自定义事件

在 Svelte 中创建自定义事件相对简单。我们使用 createEventDispatcher 函数来创建一个事件派发器。这个函数来自 svelte 库，在组件内部调用它即可得到一个 dispatch 函数，通过这个函数我们就能派发自定义事件。

首先，在组件中导入 createEventDispatcher：

<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
</script>

然后，我们可以在组件的某个逻辑中调用 dispatch 函数来派发事件。例如，我们有一个计数器组件，当计数器达到特定值时，我们派发一个自定义事件：

<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  let count = 0;

  function increment() {
    count++;
    if (count === 10) {
      dispatch('count-reached', { value: count });
    }
  }
</script>

<button on:click={increment}>Increment ({count})</button>

在这个例子中，当 count 达到 10 时，我们使用 dispatch('count-reached', { value: count }) 派发了一个名为 count - reached 的自定义事件，并附带了一个包含当前 count 值的对象。

监听自定义事件

在使用自定义事件的组件时，我们需要监听这些自定义事件。监听自定义事件的语法与监听 DOM 事件类似，只是这里监听的是组件自定义的事件名。

假设我们有一个父组件，其中使用了上述的计数器组件，我们可以这样监听 count - reached 事件：

<script>
  import Counter from './Counter.svelte';

  function handleCountReached(event) {
    console.log('Count reached:', event.detail.value);
  }
</script>

<Counter on:count-reached={handleCountReached} />

这里，on:count-reached 绑定了 handleCountReached 函数。当 Counter 组件派发 count - reached 事件时，handleCountReached 函数就会被调用，并且事件对象 event 会被传递进来。在 Svelte 中，事件对象的 detail 属性包含了我们在派发事件时传递的数据，所以我们可以通过 event.detail.value 访问到计数器的值。

自定义事件中的数据传递

  1. 简单数据传递 如前面计数器的例子，我们传递了一个简单的对象 { value: count }。这种方式适用于传递单一的数据或者少量相关的数据。例如，在一个切换开关组件中，当开关状态改变时，我们可以传递当前的开关状态：
<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  let isOn = false;

  function toggle() {
    isOn =!isOn;
    dispatch('toggle-changed', { isOn });
  }
</script>

<button on:click={toggle}>{isOn? 'On' : 'Off'}</button>

在父组件中监听这个事件并获取数据：

<script>
  import ToggleSwitch from './ToggleSwitch.svelte';

  function handleToggleChanged(event) {
    console.log('Toggle state changed:', event.detail.isOn);
  }
</script>

<ToggleSwitch on:toggle-changed={handleToggleChanged} />
  1. 复杂数据结构传递 有时候我们可能需要传递更复杂的数据结构，比如数组、嵌套对象等。例如，在一个任务列表组件中，当用户完成某个任务时，我们可能需要传递整个任务对象，这个任务对象可能包含任务的标题、描述、截止日期等多个属性。
<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  const tasks = [
    { id: 1, title: 'Task 1', description: 'Description of task 1', completed: false },
    { id: 2, title: 'Task 2', description: 'Description of task 2', completed: false }
  ];

  function markTaskAsCompleted(task) {
    task.completed = true;
    dispatch('task-completed', { task });
  }
</script>

<ul>
  {#each tasks as task}
    <li>{task.title} - {task.description} - {task.completed? 'Completed' : 'Not Completed'}
      <button on:click={() => markTaskAsCompleted(task)}>Mark as Completed</button>
    </li>
  {/each}
</ul>

在父组件中监听并处理这个事件：

<script>
  import TaskList from './TaskList.svelte';

  function handleTaskCompleted(event) {
    console.log('Task completed:', event.detail.task);
    // 可以在这里进行更复杂的操作，比如更新数据库中的任务状态
  }
</script>

<TaskList on:task-completed={handleTaskCompleted} />
  1. 事件数据的类型检查 为了确保传递的数据类型正确，我们可以使用 TypeScript 来为 Svelte 组件添加类型定义。例如，对于上述任务完成事件，我们可以这样定义类型：
import type { SvelteComponentTyped } from'svelte';

interface Task {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

interface TaskCompletedEvent {
  detail: {
    task: Task;
  };
}

export interface TaskListProps {}

export default class TaskList extends SvelteComponentTyped<
  TaskListProps,
  { 'task-completed': TaskCompletedEvent },
  {}
> {}

这样，在父组件中监听事件时，TypeScript 就能对事件数据进行类型检查，避免类型错误。

自定义事件的作用域与冒泡

  1. 事件作用域 Svelte 中的自定义事件作用域与组件紧密相关。一个组件派发的自定义事件只会被直接使用该组件的父组件监听。例如，如果有一个组件嵌套结构 Parent -> Child -> GrandChild，GrandChild 组件派发的自定义事件默认情况下只能被 Child 组件监听，而不会直接被 Parent 组件监听。
<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';

  function handleChildEvent() {
    console.log('Child event received in Parent');
  }
</script>

<Child on:child-event={handleChildEvent} />

<!-- Child.svelte -->
<script>
  import GrandChild from './GrandChild.svelte';

  function handleGrandChildEvent() {
    console.log('GrandChild event received in Child');
  }
</script>

<GrandChild on:grand-child-event={handleGrandChildEvent} />

<!-- GrandChild.svelte -->
<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();

  function dispatchGrandChildEvent() {
    dispatch('grand-child-event');
  }
</script>

<button on:click={dispatchGrandChildEvent}>Dispatch GrandChild event</button>

在这个例子中，GrandChild 组件派发的 grand - child - event 事件只能被 Child 组件捕获，Parent 组件不会直接收到这个事件。 2. 事件冒泡模拟 虽然 Svelte 中自定义事件默认不支持像 DOM 事件那样的冒泡机制，但我们可以手动模拟冒泡行为。方法是在子组件监听事件后，再次派发相同的事件给它的父组件。

<!-- Child.svelte -->
<script>
  import GrandChild from './GrandChild.svelte';
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();

  function handleGrandChildEvent() {
    console.log('GrandChild event received in Child');
    dispatch('child-event');
  }
</script>

<GrandChild on:grand-child-event={handleGrandChildEvent} />

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';

  function handleChildEvent() {
    console.log('Child event received in Parent (simulated bubble)');
  }
</script>

<Child on:child-event={handleChildEvent} />

这样，GrandChild 组件的事件就通过 Child 组件的转发，实现了类似冒泡的效果，被 Parent 组件捕获。

自定义事件与组件状态管理

  1. 通过事件更新组件状态 自定义事件可以与组件的状态管理紧密结合。例如，在一个购物车组件中，当用户添加商品到购物车时，我们可以通过自定义事件将商品信息传递到购物车组件，并更新购物车的状态。
<!-- Product.svelte -->
<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  const product = { id: 1, name: 'Product 1', price: 10 };

  function addToCart() {
    dispatch('product-added', { product });
  }
</script>

<button on:click={addToCart}>Add to Cart</button>

<!-- Cart.svelte -->
<script>
  import Product from './Product.svelte';
  let cartItems = [];

  function handleProductAdded(event) {
    cartItems = [...cartItems, event.detail.product];
  }
</script>

<Product on:product-added={handleProductAdded} />

<ul>
  {#each cartItems as item}
    <li>{item.name} - ${item.price}</li>
  {/each}
</ul>

在这个例子中，Product 组件派发 product - added 事件，Cart 组件通过监听这个事件来更新 cartItems 状态，从而实现购物车功能。 2. 状态变化触发自定义事件 反过来，组件状态的变化也可以触发自定义事件。比如在一个用户登录组件中，当用户成功登录后，我们更新组件的登录状态，并派发一个自定义事件告知其他组件用户已登录。

<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  let isLoggedIn = false;

  function login() {
    // 模拟登录逻辑
    isLoggedIn = true;
    dispatch('logged - in');
  }
</script>

{#if isLoggedIn}
  <p>You are logged in.</p>
{:else}
  <button on:click={login}>Login</button>
{/if}

在父组件中，我们可以监听这个 logged - in 事件，然后进行一些全局的操作，比如显示用户信息、更新导航栏等。

跨组件通信中的自定义事件

  1. 兄弟组件通信 在 Svelte 中，兄弟组件之间通信可以通过父组件作为中介，利用自定义事件来实现。例如，我们有两个兄弟组件 ComponentA 和 ComponentB，ComponentA 中的某个操作需要通知 ComponentB。
<!-- Parent.svelte -->
<script>
  import ComponentA from './ComponentA.svelte';
  import ComponentB from './ComponentB.svelte';

  function handleComponentAEvent() {
    console.log('Component A event received in Parent, forwarding to Component B');
    // 这里可以通过设置一个标志位等方式通知 ComponentB
  }
</script>

<ComponentA on:component - a - event={handleComponentAEvent} />
<ComponentB />

<!-- ComponentA.svelte -->
<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();

  function doSomething() {
    dispatch('component - a - event');
  }
</script>

<button on:click={doSomething}>Do something in Component A</button>

<!-- ComponentB.svelte -->
<script>
  // 这里可以通过监听父组件传递过来的某种状态变化来做出响应
</script>

在这个例子中，ComponentA 派发事件给 Parent，Parent 接收到事件后可以通过一些状态管理的方式通知 ComponentB。 2. 非直接父子组件通信 对于非直接父子关系的组件通信，我们可以使用一个中央事件总线。在 Svelte 中，可以创建一个独立的模块来作为事件总线。

// eventBus.js
import { createEventDispatcher } from'svelte';

const eventBus = {
  dispatchers: {},

  on(eventName, component, callback) {
    if (!this.dispatchers[eventName]) {
      this.dispatchers[eventName] = createEventDispatcher();
    }
    this.dispatchers[eventName].subscribe(callback.bind(component));
  },

  dispatch(eventName, data) {
    if (this.dispatchers[eventName]) {
      this.dispatchers[eventName](eventName, data);
    }
  }
};

export default eventBus;

然后在不同的组件中使用这个事件总线：

<!-- ComponentX.svelte -->
<script>
  import eventBus from './eventBus.js';

  function handleEvent(data) {
    console.log('Event received in ComponentX:', data);
  }

  $: eventBus.on('shared - event', this, handleEvent);
</script>

<!-- ComponentY.svelte -->
<script>
  import eventBus from './eventBus.js';

  function dispatchEvent() {
    eventBus.dispatch('shared - event', { message: 'Hello from ComponentY' });
  }
</script>

<button on:click={dispatchEvent}>Dispatch shared event from ComponentY</button>

通过这种方式，即使 ComponentX 和 ComponentY 没有直接的父子关系，也能通过事件总线进行通信。

性能考虑与优化

  1. 事件派发频率 在使用自定义事件时，要注意事件的派发频率。如果频繁地派发事件，可能会导致性能问题，尤其是在事件处理函数中执行复杂操作的情况下。例如，在一个实时数据更新的组件中，如果每一次数据的微小变化都派发自定义事件，可能会使事件处理函数被频繁调用，占用过多的 CPU 资源。 为了避免这种情况，可以考虑使用防抖（Debounce）或节流（Throttle）技术。防抖是指在一定时间内，如果事件被频繁触发，只执行最后一次操作。节流则是指在一定时间间隔内，无论事件被触发多少次，都只执行一次操作。
<script>
  import { createEventDispatcher } from'svelte';
  import { throttle } from 'lodash';

  const dispatch = createEventDispatcher();
  let value = 0;

  const throttledDispatch = throttle(() => {
    dispatch('value - changed', { value });
  }, 300);

  function increment() {
    value++;
    throttledDispatch();
  }
</script>

<button on:click={increment}>Increment</button>

在这个例子中，使用 lodash 的 throttle 函数，将 value - changed 事件的派发频率限制在每 300 毫秒一次。 2. 事件对象的大小 传递的事件对象大小也会影响性能。如果事件对象包含大量的数据，尤其是复杂的数据结构，在事件派发和传递过程中可能会消耗较多的内存和时间。因此，尽量只传递必要的数据。例如，在前面任务列表的例子中，如果父组件只需要知道任务的 ID 和完成状态，就没必要传递整个任务对象，而是可以这样：

<script>
  import { createEventDispatcher } from'svelte';

  const dispatch = createEventDispatcher();
  const tasks = [
    { id: 1, title: 'Task 1', description: 'Description of task 1', completed: false },
    { id: 2, title: 'Task 2', description: 'Description of task 2', completed: false }
  ];

  function markTaskAsCompleted(task) {
    task.completed = true;
    dispatch('task - completed', { id: task.id, completed: task.completed });
  }
</script>

<ul>
  {#each tasks as task}
    <li>{task.title} - {task.description} - {task.completed? 'Completed' : 'Not Completed'}
      <button on:click={() => markTaskAsCompleted(task)}>Mark as Completed</button>
    </li>
  {/each}
</ul>

这样可以减少数据传递的开销，提高性能。

常见问题与解决方法

  1. 事件未被监听 有时会遇到自定义事件没有被监听的情况。这可能是由于事件名拼写错误导致的。例如，在组件中派发事件 dispatch('custom - event')，而在父组件中监听 on:custom - evnt={handleEvent}，这里的 custom - evnt 拼写错误，就会导致事件无法被监听。仔细检查事件名的拼写一致性是解决这类问题的关键。 另外，如果事件派发在异步操作中，比如在 setTimeout 或者 Promise 的回调中，可能会出现事件派发时组件还未完全挂载，导致监听函数无效。在这种情况下，可以使用 afterUpdate 钩子函数确保组件已经更新后再进行事件派发。
<script>
  import { createEventDispatcher, afterUpdate } from'svelte';

  const dispatch = createEventDispatcher();

  setTimeout(() => {
    afterUpdate(() => {
      dispatch('async - event');
    });
  }, 1000);
</script>
  1. 事件数据丢失或错误 在传递事件数据时，可能会遇到数据丢失或类型错误的问题。如果传递的数据是对象，要确保对象的属性名和在监听组件中访问的属性名一致。对于类型错误，可以使用前面提到的 TypeScript 进行类型检查，避免在运行时出现数据访问错误。 例如，如果在派发事件时传递 dispatch('data - event', { value: 123 })，而在监听组件中试图访问 event.detail.val，就会导致数据丢失（因为属性名不一致）。

与其他前端框架事件机制的对比

  1. 与 React 的对比 在 React 中，组件间通信主要通过 props 传递和回调函数。虽然 React 也有合成事件系统，但自定义事件并不是其核心的通信方式。React 更倾向于单向数据流，通过父组件向子组件传递函数作为 props，子组件调用这些函数来通知父组件状态变化。例如：
// Parent.js
import React, { useState } from'react';
import Child from './Child';

function Parent() {
  const [count, setCount] = useState(0);

  const handleChildClick = () => {
    setCount(count + 1);
  };

  return <Child onChildClick={handleChildClick} count={count} />;
}

export default Parent;

// Child.js
import React from'react';

function Child({ onChildClick, count }) {
  return (
    <button onClick={onChildClick}>
      Click me ({count})
    </button>
  );
}

export default Child;

相比之下，Svelte 的自定义事件机制更加灵活，不需要像 React 那样通过层层传递 props 的方式来实现组件间通信，对于复杂的组件嵌套结构，Svelte 的自定义事件可以更简洁地实现通信。 2. 与 Vue 的对比 Vue 也支持自定义事件，它通过 $emit 方法在子组件中派发事件，在父组件中使用 v - on 或 @ 语法监听事件。例如：

<!-- Child.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom - event');
    }
  }
};
</script>

<!-- Parent.vue -->
<template>
  <Child @custom - event="handleEvent" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    handleEvent() {
      console.log('Custom event received');
    }
  }
};
</script>

Svelte 和 Vue 的自定义事件机制在概念上类似，但 Svelte 的语法更加简洁，并且 Svelte 在编译时对事件绑定进行优化，性能上可能更有优势。同时，Svelte 的响应式系统与事件机制结合得更加紧密，在处理组件状态变化与事件交互时更加自然。

通过以上对 Svelte 自定义事件与数据传递的深入探讨，我们可以看到它为前端开发中的组件通信提供了强大而灵活的方式。无论是简单的组件交互还是复杂的应用架构，合理运用自定义事件都能使代码结构更加清晰，提高开发效率和应用的可维护性。