# イベント API
breaking
# 概要
インスタンスメソッド$on、$off、$onceは削除されました。アプリケーションインスタンスはイベントエミッタインタフェースを実装しなくなりました。
# 2.x での構文
2.x では、Vue インスタンスを使用して、イベントエミッタ API ($on、$off、$once) を介して強制的に接続されたハンドラをトリガすることができました。これは、アプリケーション全体で使用されるグローバルイベントリスナーを作成するための イベントハブ を作るために使用されました。
// eventHub.js
const eventHub = new Vue()
export default eventHub
1
2
3
4
5
2
3
4
5
// 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')
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ParentComponent.vue
import eventHub from './eventHub'
export default {
methods: {
callGlobalCustomEvent() {
eventHub.$emit('custom-event') // ChildComponent がマウントされている場合、コンソールにメッセージが表示されます。
},
},
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.x での更新
インスタンスから$on、$off、$onceメソッドを完全に削除しました。$emitは、親コンポーネントによって宣言的にアタッチされたイベントハンドラをトリガするために使用されるので、まだ既存の API の一部です。
# 移行の戦略
Vue 3 では、これらの API を使用して、コンポーネント内からコンポーネント自身が発行したイベントを購読することはできなくなりました。そのユースケースのための移行パスはありません。
ただし、EventHub (イベントハブ) パターンは、Event Emitter (イベントエミッタ) インタフェースを実装した外部ライブラリを使用することで置き換えることができます。例えば、mitt (opens new window) や tiny-emitter (opens new window) などです。
例:
// eventHub.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args),
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
これは Vue 2 と同じような Event Emitter API を提供します。
これらのメソッドは、Vue 3 の将来の互換ビルドでもサポートされる可能性があります。
← emits オプション フィルタ →