So verwenden Sie EventBus in vue2

EventBus

Der Ereignisbus entspricht einem globalen Lager, und jede Komponente kann auf dieses Lager zugreifen, um Ereignisse abzurufen. Es wird hauptsächlich zum Übergeben von Werten zwischen Komponenten verwendet, zum Beispiel: Übergeben von Werten vom Vater an das Kind, Übergeben von Werten von Geschwistern und Übergeben von Werten von Generation zu Generation.

Verwendung:

Schritt 1: Initialisieren Sie EventBus global in main.js

Vue.prototype.$EventBus = new Vue()

Schritt 2: Senden Sie Ereignisse an EventBus in einer Komponente

this.$EventBus.$emit("msg", '123');

Schritt 3: Empfangen Sie Ereignisse in Komponente B

 mounted() {
    this.$EventBus.$on("msg", (data) => {
      this.msg = data;
    });
 }

Schritt 4: Entfernen Sie den Listener

In den obigen drei Schritten überträgt Komponente A Daten an Komponente B, aber beim Verlassen von Komponente B und beim erneuten Betreten von Komponente B gibt es mehrere Monitore im Zeitbus, die dazu führen, dass das Ereignis nur einmal ausgelöst wird, die Rückruffunktion jedoch vorhanden ist Das Überwachungsereignis wird viele Male ausgeführt. Bevor die Komponente verlässt, dh bevor sie zerstört wird, muss das Überwachungsereignis entfernt werden, damit das Überwachungsereignis beim nächsten Mal nicht erneut erstellt wird.

beforeDestroy(){
    //移除监听事件"msg"
    this.$EventBus.$off("msg")
}

Andere verwandte Verwendungen der Komponentengenerierungskommunikation:

So verwenden Sie v-bind="$attrs" in Vue 22%3A%22article%22%2C%22rId%22%3A%22127257804%22%2C%22source%22%3A%22weixin_44594219%22%7D So verwenden Sie v -on="$listeners" in Vue https : // blog.csdn.net/weixin_44594219/article/details/127259825?spm=1001.2014.3001.5502