Ausführliche Erklärung zum Umgang mit Ereignissen in vue.js

Das folgendevue.js-Tutorial wird Ihnen zeigen, wie Sie vue.js für den Umgang mit Ereignissen verwenden. Ich hoffe, es wird Ihnen hilfreich sein.

Wenn Sie Vue zum Erstellen einer dynamischen Website verwenden, möchten Sie höchstwahrscheinlich, dass diese auf Ereignisse reagiert.

Möglicherweise möchten Sie beispielsweise, dass Ihre Vue-Website auf eine bestimmte Weise reagiert, wenn der Benutzer auf eine Schaltfläche klickt, ein Formular absendet oder einfach nur die Maus bewegt.

Vue zur Verarbeitung von Ereignissen verwenden

Wir können Ereignisse abfangen, indem wir die v-on-Direktive zum relevanten DOM-Element hinzufügen. Nehmen wir an, wir möchten Klicks auf ein Schaltflächenelement verarbeiten – wir können unserer Vue-Vorlage Folgendes hinzufügen: v-on指令添加到相关DOM元素来拦截事件。假设我们要处理对按钮元素的点击-我们可以在Vue模板中添加以下内容：

<button v-on:click="clickHandler"></button>

请注意，我们在指令中添加了一个参数，该v-on参数将是我们要处理的事件的名称（在本例中为click）。

然后，我们将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们称之为clickHandler。

提示：该v-on指令具有一个方便的速记形式@，可以代替以下形式使用v-on:：<button @click="clickHandler"></button>

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

Beachten Sie, dass wir der Direktive einen Parameter hinzugefügt haben, der v-on-Parameter wird unser sein Der Name des zu behandelnden Ereignisses (in diesem Fall klicken).

Dann binden wir den Ausdruck an die Direktive, die normalerweise die Methode ist, die Sie zum Behandeln des Ereignisses verwenden möchten. In diesem Fall nennen wir es clickHandler. Tipp: Der v-on-Befehl verfügt über eine praktische Kurzform @, die anstelle von v-on::<button @click="clickHandler"></button>.

Arten von Ereignissen, die behandelt werden können

• Welche anderen DOM-Ereignisse können zusätzlich zum Klick verarbeitet werden?

Vue kann jede Art von Web- oder mobilen nativen Ereignissen verarbeiten (sowie benutzerdefinierte Ereignisse, über die wir später sprechen werden), einschließlich:
Senden
Tasteneingabe
Ziehen

Scrollen

Liste der häufigsten DOM-Ereignisse

Methoden zur Ereignisbehandlung

Wir können jetzt benutzerdefinierten Code ausführen, wenn wir die Methode an eine Ereignisbehandlungsanweisung binden. In diesem Beispiel wollen wir es einfach halten und einfach eine Nachricht in der Konsole protokollieren, Sie können aber auch etwas Interessanteres tun, wie zum Beispiel ein anderes Element ein-/ausblenden, einen Zähler erhöhen usw.

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

Ereignisobjekt

Das Ereignisobjekt wird an den Ereignishandler übergeben, was mehr Möglichkeiten für die Reaktion auf das Ereignis eröffnet. Dieses Objekt enthält viele nützliche Eigenschaften und Methoden, darunter Verweise auf das Element, von dem das Ereignis stammt (event.target), den Zeitpunkt, zu dem das Ereignis auftrat (event.timeStamp) usw.

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

Bitte beachten Sie, dass dieses Objekt von der nativen Web-API und nicht von Vue bereitgestellt wird. Es handelt sich also um dasselbe Objekt, das Sie in reinem JavaScript finden. Der Einfachheit halber finden Sie hier die Ereignisschnittstellenreferenz.

Ereignismodifikatoren

Ein häufiges Muster in JavaScript-Anwendungen besteht darin, die Formularübermittlung manuell durchzuführen, anstatt native Funktionen zu verwenden. Dazu müssen Sie die native Methode „preventDefault“ des Submit-Ereignisses verwenden, bevor Sie den Formularverarbeitungscode ausführen. Andernfalls wird die Seite umgeleitet, bevor sie abgeschlossen werden kann.

• <form @submit.prevent="formHandler"></form>

  Vue bietet einen Ereignismodifikator, um dies direkt aus der Vorlage heraus zu tun, anstatt es manuell in einem Handler zu tun. Beachten Sie, dass der Modifikator das nach der Direktive hinzugefügte „.“ ist:

  ParentComponent
   |
   | (data travels down via props, never up)  
   v 
  ChildComponent

Vue bietet mehrere verschiedene Ereignismodifikatoren, die in gängigen Ereignisbehandlungsszenarien nützlich sind:
.stop
.prevent
.capture
.self
.once

.passive

custom event

Bisher haben wir darüber gesprochen, wie man mit Native-Events umgeht. Aber Vue ist ein komponentenbasiertes Framework. Können wir also dafür sorgen, dass die Komponente ihre eigenen Ereignisse ausgibt?

Ja, das kann sehr nützlich sein. Angenommen, Sie möchten, dass eine untergeordnete Komponente Daten an eine übergeordnete Komponente sendet. Wir können hier keine Requisiten verwenden, da Requisitendaten nur vom Elternteil an das Kind weitergegeben werden und nicht anders.

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

Die Lösung besteht darin, dass die untergeordnete Komponente das Ereignis ausgibt und die übergeordnete Komponente das Ereignis abhört.

Rufen Sie dazu this.$emit("my-event") aus der untergeordneten Komponente auf, wenn das Ereignis ausgegeben werden soll. Nehmen wir zum Beispiel an, wir haben eine DialogComponent-Komponente, die ihrer übergeordneten MainPage mitteilen muss, dass sie geschlossen wurde:

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

🎜 Die übergeordnete Komponente kann dann benutzerdefinierte Ereignisse genau wie lokale Ereignisse verarbeiten. 🎜

onClose() {
  this.$emit("dialog-closed", { time: Date.now() });
}

🎜 Sie können auch Daten in einem benutzerdefinierten Ereignis senden, die über die Handler-Methode empfangen werden können: 🎜

eventHandler (event, { time }) {
  console.log(`Dialog was closed at ${time}`);
}

import Vue from "vue";
export default new Vue();

🎜 Tipp: Verwenden Sie Kebab-Fallnamen für benutzerdefinierte Ereignisse! Bei HTML wird die Groß-/Kleinschreibung nicht beachtet, sodass ein Ereignisname in Kamel-Schreibweise, wie z. B. „myEvent“, verwirrend sein wird, da „myevent“ in der Vorlage enthalten ist. Daher ist es besser, kebab-case my-event zu verwenden, um Verwirrung zu vermeiden. 🎜

活动巴士

如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。

为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。

首先，在新的模块文件中创建并导出Vue实例：

import Vue from "vue";
export default new Vue();

接下来，将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。

import eventBus from "./eventBus";

export default {
  ...
  methods: {
    myMethod () {
      eventBus.$emit("my-event")
    }
  }
}

最后，将总线导入到您想听事件的组件中。然后，您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩，就像created您可以在此处访问组件实例一样。

这是通过$on总线方法完成的，该方法带有两个参数-您要监听的事件和一个回调。

import eventBus from "./eventBus";

export default {
  ...
  created () {
    eventBus.$on("my-event", () => {
      console.log("my-event called on global event bus");
    });
  }
}

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Umgang mit Ereignissen in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!