Detaillierte Erläuterung der Verwendung von V-on-Ereignissen in Vue.js

Dieses Mal werde ich Ihnen die Verwendung von V-on-Ereignissen in Vue.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von V-on-Ereignissen in Vue.js? . Werfen wir einen Blick darauf.

Jede Vue-Instanz implementiert die Events-Schnittstelle, nämlich:

Verwenden Sie $on(eventName), um auf Ereignisse

zu warten Verwenden Sie $emit(eventName), um ein Ereignis auszulösen

Das Ereignissystem von Vue ist von der EventTarget-API des Browsers getrennt. Obwohl sie ähnlich funktionieren, sind $on und $emit keine Aliase für addEventListener und DispatchEvent.

Darüber hinaus kann die übergeordnete Komponente v-on direkt verwenden, wobei die untergeordnete Komponente zum Abhören der von der untergeordneten Komponente ausgelösten Ereignisse verwendet wird.

Hier ist ein Beispiel aus einem Dokument:

Aktualisiert am 11. April 2017

<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</p>
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

Schritt 1:

Jeder sieht dies zuerst. Nach dem Rendern sieht die benutzerdefinierte Beschriftung in Schritt 4 tatsächlich so aus: Schritt 1 Derselbe Code, daher sollten wir hier beginnen, um die Ereignisbindung zwischen übergeordneten und untergeordneten Komponenten zu verstehen. In der Unterkomponente ist das Klickereignis (Klick) an die -Funktion inkrementiert (also Schritt 2 im -Bild ). Das ist hier also leicht zu verstehen , wird auf die der Unterkomponente geklickt. Die Schaltfläche löst die Inkrementierungsfunktion

aus, die sich in der untergeordneten Komponente befindet Schritt 2 und Schritt 3:

Die Ausführung der Inkrementierungsfunktion wird ausgelöst, und in Schritt 2 wird eine Anweisung ausgeführt, die die Funktion aufruft

this.$emit('increment')

Werfen wir einen Blick auf die Dokumentation

vm.$emit( ​​​​event, […args] ): Löst ein Ereignis auf der aktuellen Instanz aus. Zusätzliche Parameter werden an den Listener-Callback

übergeben Was bedeutet es hier? So sage ich es in meiner eigenen Umgangssprache:

Durch diese Funktion kann die übergeordnete Komponente wissen, welche Funktion die untergeordnete Komponente aufgerufen hat. Dies ähnelt der untergeordneten Komponente, die der übergeordneten Komponente „Hallo Papa, ich habe meine eigene Inkrementierungsfunktion aufgerufen“ sagt übergeordnete Komponente

Schritt 4:

Wenn Sie auf das in der übergeordneten Komponente definierte benutzerdefinierte Tag zurückblicken, sehen Sie

v-on:increment="incrementTotal"

Was bedeutet es? Lassen Sie es uns im Klartext erklären

Das heißt: „Kind, wenn du die Inkrementfunktion aufrufst, rufe ich die InkrementTotal-Funktion auf, um dir zu antworten“

Zu diesem Zeitpunkt erinnern wir uns an Schritt 3. In der untergeordneten Komponente haben wir Emit verwendet, um eine gegenseitige Reaktion und Informationsübertragung zwischen der übergeordneten und der untergeordneten Komponente zu ermöglichen Übergeordnete und untergeordnete Komponenten verwenden diese Methode ebenfalls. Wenn eine Komponente Informationen an eine untergeordnete Komponente übergibt, werden die von der übergeordneten Komponente übergebenen Informationen normalerweise nicht direkt in der untergeordneten Komponente geändert, und ein solcher Hook wird zur Benachrichtigung verwendet die übergeordnete Komponente, um bestimmte Parameter zu ändern

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

Empfohlene Lektüre:

So verwenden Sie anonyme JS-Funktionen

nodejs führt Live-Video-Streaming basierend auf ffmpeg durch

Detaillierte Schritte zum Festlegen globaler Stile in Vue2.0

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von V-on-Ereignissen in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!