一度だけ呼び出す必要があるときに$ emitと$ onを使用して複数回呼び出されたVue.jsメソッド

Question

私はこのリンクに記載された方法でコンポーネントが他のコンポーネントとやり取りできるようにバスを使用しています：https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2。

私はイベントを発生させるためにバスを使用する作成されたフックで呼び出されるメソッドを持っています。 （上記の成分に含まれている）別のコンポーネントで

created() { 
    this.getReviewDeck() 
}, 
myMethod() { 
    bus.$emit('increment') 
} 

が、私は以下のように作成したフックにイベントリスナーをアタッチ：私はコンポーネントを訪問すれば

created() { 
    bus.$on('increment', this.incrementCount) 
}, 
incrementCount() { 
    console.log('count incremented') 
} 

初めてのすべてが正常に動作し、コンソールは「カウント増分」を1回記録します。しかし、私がコンポーネントを離してからそれに戻ってくると、次回に 'count incremented'が2回記録され、再び出て再び3回ログに記録されます。

私はできません正確に何が起こっているのか、この問題を解決するにはどのように最善の方法を考えて、コンポーネントに行く度にメッセージを複数回ではなく1回だけ記録するようにします。

Answer 1

破壊時にイベントハンドラを削除する必要がありました。

beforeDestroy() { 
    EventBus.$off('increment', this.incrementCount) 
},