【Vue.js】$onによる同一イベントへのハンドラ登録は、上書きではなく追加形式になる

jQueryと同様に、Vueコンポーネントへハンドル可能なイベントを登録する組み込みのメソッド $on は、同一イベントに対し複数回ハンドラ登録を行うと、その全てがハンドラとして有効になります。

function hello () {
    console.log('hello.');
}

function yee () {
    console.log('yee.');
}

const eventBus = new Vue();
eventBus.$on('hello-event', hello);
eventBus.$on('hello-event', yee);

eventBus.$emit('hello-event')
// hello.
// yee.

上記の例では、 $on を使って同じイベントに異なるハンドラを続けて登録しています。
このような場合、 hello は yee によって上書きされず、 両方のハンドラが hello-event に対するハンドラとして呼ばれるようになります。

上書き形式でハンドラの登録を行いたい場合、 $off を使用して一旦イベントハンドラを削除し、再度 $on でハンドラを登録し直します。

eventBus.$off('hello-event');
eventBus.$on('hello-event', yee);