So verwenden Sie den Vue-Komponentenkommunikationsbus

Dieses Mal erkläre ich Ihnen, wie Sie den Vue-Komponenten-Kommunikationsbus verwenden Vorsichtsmaßnahmen Das Folgende ist ein praktischer Fall, schauen wir uns das an.

$dispatch und $broadcast sind in vue2.0 veraltet. Die Erklärung in der offiziellen Dokumentation lautet:

Denn die auf der Komponentenbaumstruktur basierende Ereignis-Flussmethode ist wirklich schwer zu verstehen und wird mit zunehmender Komponentenstruktur immer fragiler. Diese Ereignismethode ist wirklich nicht gut und wir möchten den Entwicklern in Zukunft nicht zu viel Ärger bereiten. Und $dispatch und $broadcast lösen nicht das Kommunikationsproblem zwischen Geschwisterkomponenten.

Die offiziell empfohlene Status-Managementlösung ist Vuex. Wenn das Projekt jedoch nicht sehr groß ist und die Statusverwaltung nicht sehr kompliziert ist, wird sich die Verwendung von Vuex wie ein Overkill anfühlen. Dies hängt natürlich auch von Ihren eigenen Bedürfnissen ab und ist nur ein Vorschlag.

Tatsächlich gibt es noch eine Demo zu dieser Nicht-Eltern-Kind-Komponentenkommunikation. Sie ist in den Migrationsdokumenten von $dispatch und $broadcast versteckt. Interessierte Freunde können darauf klicken. Der Vorschlag im Dokument lautet:

Der einfachste Weg, $dispatch und $broadcast zu aktualisieren, besteht darin, Event Hubs zu verwenden, um den Komponenten eine freie Kommunikation zu ermöglichen, unabhängig davon, wo sie sich in der Komponentenstruktur befinden. Da Vue-Instanzen eine Event-Dispatching-Schnittstelle implementieren, können Sie dies erreichen, indem Sie eine leere Vue-Instanz instanziieren. Diese zentralisierte Ereignis
Middleware ist Bus. Ich bin es gewohnt, Bus global zu definieren:

app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

Dann können Sie in der Komponente $emit, $on, $off verwenden, um Abhörereignisse zu verteilen, zu überwachen bzw. abzubrechen:

Komponenten, die Ereignisse verteilen

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

Hörkomponente

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

Wenn Sie mehrere Komponenten überwachen müssen, müssen Sie nur den Ereignisnamen des Busses ändern:

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So wechseln Sie die Pfeiltasten mit dem Swiper-Plug-in

So implementieren Sie ein Seitenleistenmenü mit Vue +Swiper

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Vue-Komponentenkommunikationsbus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!