事件 API

breaking

概览

$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。

2.x 语法

在 2.x 中，Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on，$off 和 $once)，这用于创建 event hub，以创建在整个应用程序中使用的全局事件侦听器：

  1. // eventHub.js
  3. const eventHub = new Vue()
  5. export default eventHub
  1. // ChildComponent.vue
  2. import eventHub from './eventHub'
  4. export default {
  5.   mounted() {
  6.     // 添加 eventHub listener
  7.     eventHub.$on('custom-event', () => {
  8.       console.log('Custom event triggered!')
  9.     })
  10.   },
  11.   beforeDestroy() {
  12.     // 移除 eventHub listener
  13.     eventHub.$off('custom-event')
  14.   }
  15. }
  1. // ParentComponent.vue
  2. import eventHub from './eventHub'
  4. export default {
  5.   methods: {
  6.     callGlobalCustomEvent() {
  7.       eventHub.$emit('custom-event') // 如果ChildComponent mounted，控制台中将显示一条消息
  8.     }
  9.   }
  10. }

3.x 更新

我们整个从实例中移除了 $on，$off 和 $once 方法，$emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序

迁移策略

例如，可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt 事件 API - 图1 (opens new window)。

在兼容性构建中也可以支持这些方法。