Events API removedbreaking

Overview

$on, $off and $once instance methods are removed. Vue instances no longer implement the event emitter interface.

2.x Syntax

In 2.x, Vue instance could be used to trigger handlers attached imperatively via the event emitter API ($on, $off and $once). This was used to create event hubs to create global event listeners used across the whole application:

  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.     // adding eventHub listener
  7.     eventHub.$on('custom-event', () => {
  8.       console.log('Custom event triggered!')
  9.     })
  10.   },
  11.   beforeDestroy() {
  12.     // removing 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') // if ChildComponent is mounted, we will have a message in the console
  8.     }
  9.   }
  10. }

3.x Update

We removed $on, $off and $once methods from Vue instance completely. $emit is still a part of the existing API as it’s used to trigger event handlers declaratively attached by a parent component

Migration Strategy

Existing event hubs can be replaced by using an external library implementing the event emitter interface, for example mittEvents API - 图1.

These methods can also be supported in compatibility builds.