イベント API

breaking

概要

インスタンスメソッド$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() {
    // eventHub リスナーの追加
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // eventHub リスナーの削除
    eventHub.$off('custom-event')
  },
}

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

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event') // ChildComponent がマウントされている場合、コンソールにメッセージが表示されます。
    },
  },
}

3.x での更新

インスタンスから$on、$off、$onceメソッドを完全に削除しました。$emitは、親コンポーネントによって宣言的にアタッチされたイベントハンドラをトリガするために使用されるので、まだ既存の API の一部です。

移行の戦略

既存のイベントハブは、イベントエミッタインタフェースを実装した外部ライブラリ、例えば mitt (opens new window) を使用して置き換えることができます。

これらのメソッドは互換性のあるビルドでもサポートされています。