Ein Artikel, der die benutzerdefinierten Ereignisse und den globalen Ereignisbus von Vue-Komponenten kurz analysiert

Dieser Artikel stellt Ihnen die Vue-Komponente vor und stellt die benutzerdefinierten Ereignisse und den globalen Ereignisbus der Vue-Komponente vor. Ich hoffe, er wird Ihnen hilfreich sein!

1. Benutzerdefinierte Ereignisse

1. Was sind benutzerdefinierte Ereignisse? 2. Verwendungszweck

Wenn App die übergeordnete Komponente und School die untergeordnete Komponente ist und School Daten an App übertragen möchte, muss ein benutzerdefiniertes Ereignis an School in App gebunden werden (der Rückruf von Das Ereignis befindet sich in der App. Das heißt, die übergeordnete Komponente muss im Voraus ein selbstdefiniertes Ereignis zur Verwendung durch die untergeordnete Komponente binden, damit die Datenkommunikation zwischen Vater und Sohn abgeschlossen werden kann. Es ist, als würde der Vater von Little A aus arbeiten Stadt, und dann vermisst der kleine A seinen Vater. Dann rief sein Vater den kleinen A im Voraus an und sagte, er solle diesen Anruf tätigen, wenn er mich vermisse. Dann konnte der kleine A mit seinem Vater kommunizieren, nachdem er den Anruf getätigt hatte übergeordnete Komponente. Benutzerdefinierter Ereignisrückruf, damit die Daten an die übergeordnete Komponente übergeben werden können

3.1 Der erste Weg, in der übergeordneten Komponente: oder

3.2 Der zweite Weg, in der übergeordneten Komponente: montiert(){this . $refs. xxx. $on('shanyu' ,this. test)}

Wenn Sie ein natives Ereignis in ein benutzerdefiniertes Ereignis schreiben, wird es standardmäßig auch ein benutzerdefiniertes Ereignis sein, daher verwenden wir @xxx.native um dieses Problem zu lösen [Verwandte Empfehlungen:

vuejs-Video-Tutorial

,

Web-Front-End-Entwicklung

]

Schreiben Sie zunächst eine benutzerdefinierte Komponente in die übergeordnete Komponente (wenn Sie möchten, dass das benutzerdefinierte Ereignis nur einmal ausgelöst wird, können Sie verwenden der Once-Modifikator oder die $once-Methode)

      // 在父组件内自定义个事件
    getMyStudent(name) {
      console.log("App收到学校名:", name);
      this.studentName = name;
    }
  },
  mounted() {
    this.$refs.student.$on("shanyu", this.getMyStudent);
  }

Finden Sie die Unterkomponente, die das Shanyu-Ereignis auf der Student-Komponenteninstanz auslöst 4. Benutzerdefinierte Ereignisse entbinden

    methods: {
        sendStudentName(){
            //触发Student组件实例身上的shanyu事件
            this.$emit('shanyu',this.name)
        }
    }

Hinweis: Wenn Sie benutzerdefinierte Ereignisse über $refs('shanyu', callback) binden, müssen Sie diese entweder in den Methoden konfigurieren oder die Pfeilfunktion verwenden Wird es Probleme mit diesem Verweis geben, was dazu führt, dass Vue Fehler meldet? . Es ist dasselbe wie benutzerdefinierte Ereignisse, kann jedoch die Kommunikation zwischen Brüdern realisierenDabei handelt es sich hauptsächlich um drei Dateien main.js und zwei Bruderkomponenten. js ist die Datei mit vm, und dann wird der globale Event-Bus in der vue-Instanz installiert. Warum sollte er also im beforeCreate-Hook platziert werden? Denn das Merkmal des beforeCreate-Lebenszyklus-Hooks ist, dass er ausgeführt wird, bevor die Daten aktualisiert werden. Bus bedeutet nicht nur Bus, sondern auch Bus 3. Verwenden Sie Ereignisbus

. Daten empfangen

Wenn Komponente A Daten empfangen möchte, binden Sie ein benutzerdefiniertes Ereignis an $bus in Komponente A, und der Rückruf des Ereignisses bleibt in Komponente A selbst. methoden(){montiert() {this. Daten übertragen)

    unbind(){
        this.$off('shanyu')// 只适用于解绑1个事件
        this.$off(['shanyu','demo'])// 适用于解绑多个
        this.$off()// 适用于解绑全部
    }

Hinweis: Es ist am besten, $off im beforeDestroy-Hook zu verwenden, um die von der aktuellen Komponente verwendeten Ereignisse zu entbinden.

(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEin Artikel, der die benutzerdefinierten Ereignisse und den globalen Ereignisbus von Vue-Komponenten kurz analysiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!