Vue 3.0 事件API

#概覽

$on，$off 和 $once 實(shí)例方法已被移除，應(yīng)用實(shí)例不再實(shí)現(xiàn)事件觸發(fā)接口。

#2.x 語法

在 2.x 中，Vue 實(shí)例可用于觸發(fā)通過事件觸發(fā) API 強(qiáng)制附加的處理程序 ($on，$off 和 $once)，這用于創(chuàng)建 event hub，以創(chuàng)建在整個(gè)應(yīng)用程序中使用的全局事件偵聽器：

// eventHub.js


const eventHub = new Vue()


export default eventHub

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


export default {
  mounted() {
    // 添加 eventHub listener
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // 移除 eventHub listener
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'


export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event') // 如果ChildComponent mounted，控制臺(tái)中將顯示一條消息
    }
  }
}

#3.x 更新

我們整個(gè)從實(shí)例中移除了 $on，$off 和 $once 方法，$emit 仍然是現(xiàn)有 API 的一部分，因?yàn)樗糜谟|發(fā)由父組件以聲明方式附加的事件處理程序

#遷移策略

例如，可以通過使用實(shí)現(xiàn)事件發(fā)射器接口的外部庫來替換現(xiàn)有的 event hub mitt。

在兼容性構(gòu)建中也可以支持這些方法。