$on$off$once 实例方法被删除。实例上不再实现这三个事件接口(核心就是事件触发与事件监听器功能的封装)。

2.x 语法

在2.x中,Vue 实例可以用事件API($on$off$once)强制附加的处理代码逻辑。这用于创建监听器功能,以创建在整个应用程序中使用的全局事件监听器:

// eventHub.js

const eventHub = new Vue()

export default eventHub
// ChildComponent.vue
import eventHub from './eventHub'

export default {
  mounted() {
    // adding eventHub listener
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // removing eventHub listener
    eventHub.$off('custom-event')
  }
}
// ParentComponent.vue
import eventHub from './eventHub'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
    }
  }
}

3.x 更新

Vue3 从实例中完全删除了 $on$off$once 方法。$emit 仍然是现有API的一部分,因为它用于触发由父组件以声明方式附加的事件。

第三方库

Vue3不支持eventBus,那么官方推荐的做法是使用第三方库:

mitt
tiny-emitter

Logo

前往低代码交流专区

更多推荐