Einfache Verwendung des Vue-Busses

Einfache Verwendung des Vue-Busses

Beschreibung des Szenarios:

Komponente A umfasst die Komponenten B und C, und Komponente B umfasst Komponente D. Was wäre, wenn Komponente D die Methode von Komponente C in Komponente A auslösen möchte?

Natürlich gibt es Lösungen. Sie können vuex verwenden, um den Status zu verwalten, oder Sie können $emit verwenden, um ihn zu übergeben, aber ich möchte die Busmethode ausprobieren.

wie folgt:

Das Senden des Busses wird in der D-Komponente ausgelöst und dann wird das Einschalten des Busses verwendet, um die Methode in der A-Komponente auszulösen.

In Komponente D

Daten laden () {
   console.log('Laden des Triggerereignisses abgeschlossen');
   dies.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('event name', parameter) // Der zweite kann ein Parameter sein},

In Komponente A

 montiert() {
    // Auf das Laden der Daten im Element warten this.$bus.$on('itemDataLoad', () => {
      console.log('Datenladen abgeschlossen');
    })
    // this.$bus.$on('Ereignisname', Rückruffunktion (Parameter))
  },

Natürlich können in Komponente A Ereignisse in Komponente C durch this.$refs usw. ausgelöst werden.

Ein weiterer Schritt ist, dass $bus standardmäßig nicht existiert. Versuchen Sie, this.$bus為undefined .

Keine Sorge, fügen Sie $bus in main.js hinzu;

// Bus Bus Vue-Instanz Vue.prototype.$bus = new Vue()

Selbstverständlich kann der Bus während des Lebenszyklus entfernt werden;

dies.$bus.$off();

Aufnahme gekapselte Anti-Shake-Funktion

// Entprellfunktion: function (fun, delay) {
    let timer = null
    // Erhalte den Wert des Parameters, der beim Aufruf der Funktion übergeben wurde... args können mehrere sein return function (...args) {
      wenn (Zeit) zurückgeben
      Timer = setzeTimeout(() => {
        Spaß.anwenden(dies, Argumente)
      }, Verzögerung);
    }
  }

const refresh = Entprellung(xxx, 500)

Aktualisieren('Parameter 1', 'Parameter 2', 'Parameter 3')

Dies ist das Ende dieses Artikels über die einfache Verwendung des Vue-Busses. Weitere relevante Inhalte zur einfachen Verwendung des Vue-Busses finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!