Detaillierte Erläuterung der Selbstimplementierung von Dispatch und Broadcast (Dispatch und Broadcast) durch Vue

Funktion Broadcast (Komponentenname, Ereignisname, Parameter) {
 dies.$children.forEach(child => {
  const name = untergeordnetes Element.$Optionen.name;

  wenn (Name === Komponentenname) {
   Kind.$emit.apply(Kind, [Ereignisname].concat(Parameter));
  } anders {
   // todo Wenn params ein leeres Array ist, erhält es undefined
   broadcast.apply(Kind, [Komponentenname, Ereignisname].concat([Parameter]));
  }
 });
}
Standard exportieren {
 Methoden: {
  dispatch(Komponentenname, Ereignisname, Parameter) {
   lass übergeordnetes Element = dies.$übergeordnetes Element || dies.$wurzel;
   lass name = übergeordnetes Element.$options.name;

   während (übergeordnetes Element && (!name || name !== Komponentenname)) {
    Elternteil = Elternteil.$Elternteil;

    wenn (Elternteil) {
     Name = übergeordnetes Element.$Optionen.Name;
    }
   }
   wenn (Elternteil) {
    übergeordnetes Element.$emit.apply(übergeordnetes Element, [Ereignisname].concat(Parameter));
   }
  },
  Broadcast(Komponentenname, Ereignisname, Parameter) {
   broadcast.call(dies, Komponentenname, Ereignisname, Parameter);
  }
 }
};

<Vorlage>
 <div>
  <h1>Ich bin die übergeordnete Komponente</h1>
  <button @click="handleClick">Ereignis auslösen</button> <child />
 </div>
</Vorlage>
<Skript>
importiere Emitter aus "@/mixins/emitter.js";
importiere Kind aus "./child";
Standard exportieren {
 Name: "KomponenteA",
 Mixins: [Emitter],
 erstellt() {
  dies.$on("Kind-zu-p", dies.handleChild);
 },
 Methoden: {
  handleKlick() {
   this.broadcast("KomponenteB", "On-Message", "Hallo Vue.js");
  },
  handleChild(Wert) {
   Alarm(Wert);
  }
 },
 Komponenten:
  Kind
 }
};
</Skript>

<Vorlage>
 <div>Ich bin eine untergeordnete Komponente</div>
</Vorlage>
<Skript>
importiere Emitter aus "@/mixins/emitter.js";
Standard exportieren {
 Name: "KomponenteB",
 Mixins: [Emitter],
 erstellt() {
  dies.$on("on-message", dies.showMessage);
  this.dispatch("KomponenteA", "Kind-zu-P", "Hallo Elternteil");
 },
 Methoden: {
  Nachricht anzeigen(Text) {
   Fenster.Alarm(Text);
  }
 }
};
</Skript>