Eine kurze Einführung in die grundlegende Ereignisverarbeitung in Vue

Dieser Artikel vermittelt Ihnen relevantes Wissen über vue, der hauptsächlich verwandte Themen zur grundlegenden Vue-Ereignisverarbeitung vorstellt, die ein notwendiger Aspekt jedes Vue-Projekts ist. Es wird zum Erfassen von Benutzereingaben, zum Teilen von Daten und auf viele andere kreative Arten verwendet. Schauen wir es uns gemeinsam an, ich hoffe, es wird für alle hilfreich sein.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】

Vue-Ereignisbehandlung ist ein notwendiger Aspekt jedes Vue-Projekts. Es wird zum Erfassen von Benutzereingaben, zum Teilen von Daten und auf viele andere kreative Arten verwendet.

In diesem Artikel werde ich die Grundlagen behandeln und einige Codebeispiele für den Umgang mit Ereignissen bereitstellen.

Grundlegende Ereignisbehandlung

Mit der v-on-Direktive (@, kurz) können wir DOM-Ereignisse abhören und Handler-Methoden oder Inline-Javascript ausführen:

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />

Wir werden einige der häufigeren Ereignisse behandeln, die Sie möglicherweise erfassen möchten , Single Klicken Sie hier für eine vollständige Liste der DOM-Ereignisse.

Emittieren benutzerdefinierter Ereignisse

Ein häufiger Anwendungsfall in jedem Web-Framework besteht darin, dass eine untergeordnete Komponente Ereignisse an ihre übergeordnete Komponente ausgeben kann. Dies ermöglicht eine bidirektionale Datenbindung.

Ein Beispiel hierfür ist das Senden von Daten von einer Eingabekomponente an ein übergeordnetes Formular.

Die Syntax zum Ausgeben von Ereignissen unterscheidet sich je nachdem, ob wir die Options-API oder die Composition-API verwenden.

In der Options-API können wir dies einfach aufrufen.$emit(eventName, payload):

export default {
  methods: {
    handleUpdate() {
      this.$emit('update', 'Hello World')
    }
  }
}

Die Composition-API verfügt jedoch nicht über dies. Stattdessen können wir über die Vue3-Setup-Methode direkt auf die Emit-Methode zugreifen. Der zweite Parameter der

setup-Methode ist die Kontextvariable, die drei Attribute enthält: attrs, slots und emit.

Solange das Kontextobjekt importiert ist, kann emit mit denselben Parametern wie die Options-API aufgerufen werden.

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

Eine Möglichkeit, Ihren Code aufzuräumen, besteht darin, Objektdestrukturierung zu verwenden, um Emit direkt zu importieren. Es sieht so aus.

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }
    return { handleUpdate }
  } 
}

Unabhängig davon, ob wir die Options-API oder die Composition-API verwenden, lauscht unsere übergeordnete Komponente auf benutzerdefinierte Ereignisse auf die gleiche Weise.

<HelloWorld @update=&#39;inputUpdated&#39;/>

Wenn der von uns ausgegebenen Methode auch ein Wert übergeben wird, können wir ihn auf zwei verschiedene Arten erfassen – je nachdem, ob wir inline arbeiten oder eine andere Methode verwenden.

Zuerst können wir den übergebenen $event-Wert in der Vorlage verwenden.

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

Zweitens: Wenn wir eine Methode zur Verarbeitung des Ereignisses verwenden, wird der übergebene Wert automatisch als erster Parameter an unsere Methode übergeben.

<HelloWorld @update=&#39;inputUpdated&#39;/>
Was bedeutet berechnet in Vue?
Welche Technologien werden zum Erstellen von Vue-Cli-Projekten verwendet?
Welche Frameworks können für Vue verwendet werden?
So implementieren Sie eine Single-Page-Anwendung (SPA) mit Laravel8+Vuejs
Lassen Sie uns darüber sprechen, wie Vue2-Entwickler schnell mit Vue3 beginnen können