---
title: "创建自定义事件"
description: "Nuxt 提供了由 hookable 驱动的强大事件系统。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/events"
---
# 创建自定义事件

> Nuxt 提供了由 hookable 驱动的强大事件系统。

使用事件是将应用解耦，并允许代码不同部分之间进行更灵活、更模块化通信的好方法。事件可以有多个互不依赖的监听器。例如，每当订单发货时，你可能希望向用户发送邮件。与其将订单处理代码耦合到邮件代码，不如发出一个事件，让监听器接收并用于派发邮件。

Nuxt 事件系统由 [unjs/hookable](https://github.com/unjs/hookable) 提供支持，这也是驱动 Nuxt 钩子系统的相同库。

## 创建事件与监听器

你可以使用 `hook` 方法创建你自己的自定义事件：

```ts
const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', (payload) => {
  console.log('A new user has registered!', payload)
})
```

要触发事件并通知任何监听器，请使用 `callHook`：

```ts
const nuxtApp = useNuxtApp()

await nuxtApp.callHook('app:user:registered', {
  id: 1,
  name: 'John Doe',
})
```

你还可以使用 payload 对象在触发者和监听器之间实现双向通信。由于 payload 是按引用传递的，监听器可以修改它以向触发者发送数据。

```ts
const nuxtApp = useNuxtApp()

nuxtApp.hook('app:user:registered', (payload) => {
  payload.message = 'Welcome to our app!'
})

const payload = {
  id: 1,
  name: 'John Doe',
}

await nuxtApp.callHook('app:user:registered', {
  id: 1,
  name: 'John Doe',
})

// payload.message will be 'Welcome to our app!'
```

<tip>

你可以使用 **Nuxt DevTools** 的 Hooks 面板来检查所有事件。

</tip>

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/hooks">

了解更多关于 Nuxt 内置钩子以及如何扩展它们的信息

</read-more>


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.