web-dev-qa-db-ja.com

Vue.jsメソッドは、$ emitと$ onを使用して複数回呼び出され、1回だけ呼び出す必要がある場合

私はバスを使用して、このリンクで説明されている方法でコンポーネントが他のコンポーネントと対話できるようにしています： 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')
}

初めてコンポーネントにアクセスした場合、すべてが正しく機能し、コンソールは「count incremented」を1回記録します。ただし、コンポーネントを離れてから次にナビゲートすると、「インクリメントされたカウント」が2回ログに記録されます。また、離れて再び戻ると、3回ログに記録されます。

正確に何が起こっているのか、この問題を解決するための最善の方法がよくわからないので、コンポーネントにアクセスするたびに、メッセージは複数回ではなく1回だけ記録されます。

vuejs2vue-componentvue.js
12
dpst

Destroyでイベントハンドラーを削除する必要がありました。

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

$ .onceを使用できます

created () {
  bus.$once('increment', this.incrementCount)
},
7
Jdmiguel

これは、イベントが発行された後に一度だけアクションを実行したい場合に機能します。たとえば、イベントをリッスンしたままにしたい場合はどうでしょう。たとえば、グラフのデータポイントにカーソルを合わせると、他のコンポーネントのアクションをトリガーしたい場合があります。その場合、$ onceを使用しても機能しません。ホバーでイベントを発行し、そのイベントが$ onを使用してサブスクライブされるという同じ問題に直面しています。イベントは1回だけ呼び出されますが、私の場合は複数回呼び出されます。

これが私がイベントを発行する方法です。

this.$eventBus.$emit("SHOW_HOVERLINE", d);

これが私がイベントを購読する方法です。

this.$eventBus.$on("SHOW_HOVERLINE", this.someFunction);
1
Rushikesh Mhetre

Vueソースコードで何かが変更されたようです。destroyed、beforeDestroy、beforeRouteLeaveまたはその他のフックでeventBusリスナーをオフにすると、次のようになります。古いリスナーは、再登録された新しいリスナーとともに削除されます作成されたフックで。

DestroyedおよびbeforeDestroyフックの場合、作成されたフックの後に呼び出されるため、理解できます。そのため、created（）はリスナーを追加し、destroyed（）はそれらをすべて削除します。以前のcreated（）からのリスナーだけではありません。しかし、ルートフックについては、created（）の前に呼び出されるため、動作を理解できませんが、再登録された同じリスナーはすべて機能しません。

私がしたことは、再登録する前に作成されたフックでeventBusリスナーをオフにすることです

created() {
  eventBus.$off("someListener");
  eventBus.$on("someListener", () => {
    // do smth
  })
}

ただし、これはコンポーネントが再作成された場合にのみ機能します。コンポーネントはアプリのライフサイクル中に1回だけ作成され、登録されたリスナーは機能しません。しかし、コンポーネントが一度作成されると、この再登録は必要ありません。

0
Alonad

すべてのリスナーを削除するには：

his.$eventBus.$off()
0
omarjebari