Detaillierte Einführung in die Verwendung des Vue-Ereignisbusses (EventBus)

Vorwort

Zu den sehr häufigen Vue-Komponenten gehören die Kommunikation zwischen Eltern-Kind-Komponenten und Geschwister-Komponenten. Die Kommunikation zwischen übergeordneten und untergeordneten Komponenten ist sehr einfach. Die übergeordnete Komponente gibt Daten über Requisiten an die untergeordnete Komponente weiter. Wenn die untergeordnete Komponente der übergeordneten Komponente etwas mitzuteilen hat, teilt sie dies der übergeordneten Komponente über das $emit-Ereignis mit. Lassen Sie uns heute darüber sprechen, wie man kommuniziert, wenn zwischen zwei Seiten, die eingeführt und eingeführt werden, keine Beziehung besteht.

Detaillierte Einführung in die Verwendung des Vue-Ereignisbusses (EventBus)

Wenn unsere Anwendung keine Bibliothek wie Vuex benötigt, um die Datenkommunikation zwischen Komponenten abzuwickeln, können wir den Ereignisbus in Vue, nämlich EventBus , für die Kommunikation in Betracht ziehen.

Einführung in EventBus

EventBus wird auch Eventbus genannt. In Vue kann EventBus als Kommunikationsbrückenkonzept verwendet werden. Es ist, als ob alle Komponenten dasselbe Ereigniszentrum teilen. Sie können sich registrieren, um Ereignisse an das Zentrum zu senden oder Ereignisse zu empfangen, sodass Komponenten andere Komponenten parallel nach oben und unten benachrichtigen können Das ist auch Es ist praktisch und führt bei unachtsamer Verwendung zu einer „Katastrophe“, die schwer zu warten ist. Daher ist ein vollständigerer Vuex als Zustandsverwaltungszentrum erforderlich, um das Konzept der Benachrichtigungen auf die gemeinsame Zustandsebene zu heben.

So verwenden Sie EventBus

Detaillierte Einführung in die Verwendung des Vue-Ereignisbusses (EventBus)

1. Initialisierung
Zunächst müssen Sie den Ereignisbus erstellen und exportieren, damit andere Module ihn verwenden oder überwachen können. Wir können damit auf zwei Arten umgehen. Schauen wir uns zunächst die erste an: Erstellen Sie eine neue .js-Datei, z. B. event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
Tatsächlich ist EventBus eine Komponente, die kein DOM hat. Sie hat nur ihre Instanzmethode, daher ist sie sehr leichtgewichtig.

Eine andere Möglichkeit besteht darin, EventBus direkt in main.js im Projekt zu initialisieren:

// main.js
Vue.prototype.$EventBus = new Vue()
Beachten Sie, dass der auf diese Weise initialisierte EventBus ein globaler Ereignisbus ist. Lassen Sie uns später über den globalen Eventbus sprechen.

Nachdem wir nun den EventBus erstellt haben, müssen Sie ihn nur noch in Ihre Komponente laden und dieselbe Methode aufrufen, genau wie in einer Eltern-Kind-Komponente, um Nachrichten aneinander weiterzuleiten.

2.
Detaillierte Einführung in die Verwendung des Vue-Ereignisbusses (EventBus) zum Senden von Ereignissen

Angenommen, Sie haben zwei Vue-Seiten, die kommunizieren müssen: A und B. Seite A hat ein Klickereignis, das an die Schaltfläche gebunden ist, und sendet eine Nachricht, um Seite B zu benachrichtigen.

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import {
   
    
     EventBus } from "../event-bus.js";
export default {
   
    
    
  methods: {
   
    
    
    sendMsg() {
   
    
    
      EventBus.