Vue3 Vue-Ereignisbehandlungshandbuch

1. Grundlegende Ereignisbehandlung

Mit v-on指令(kurz @ ) können wir DOM Ereignisse abhören und Handlermethoden oder Inline- Javascript ausführen.

// v-on-Direktive <div v-on:click='handleClick' />

//ODER

<div @click='handleClick' />

2. Senden Sie benutzerdefinierte Ereignisse an übergeordnete Komponenten

Ein häufiger Anwendungsfall in jedem Web-Framework besteht darin, dass untergeordnete Komponenten Ereignisse an ihre übergeordneten Komponenten senden können sollen. Dies entspricht auch dem Prinzip der bidirektionalen Datenbindung.

Ein gängiges Beispiel ist das Senden von Daten von input Eingabekomponente an ein übergeordnetes Formular.

Je nachdem, ob wir Options API oder Composition API verwenden, ist die Syntax zum Ausgeben von Ereignissen unterschiedlich.

In Options API können wir einfach this.$emit(eventName, payload ) aufrufen, wie unten gezeigt:

Standard exportieren {
  Methoden: {
    handleUpdate: () => {
      dies.$emit('update', 'Hallo Welt')
    }
  }
}

Composition API wird jedoch anders verwendet. Sie müssen die emit -Methode in der von Vue3 bereitgestellten setup Methode verwenden.

Solange Sie context Kontextobjekt importieren, können Sie „emit“ mit denselben Argumenten wie Options API aufrufen.

Standard exportieren {
  Setup (Eigenschaften, Kontext) {
    const handleUpdate = () => {
      Kontext.emit('Update', 'Hallo Welt')
    }

    return { handleUpdate}
  } 
}

Natürlich nutze ich in meinen Projekten oft Dekonstruktion:

Standard exportieren {
  setup (eigenschaften, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hallo Welt')
    }

    return { handleUpdate}
  } 
}

Perfekt!

Unabhängig davon, ob wir Options oder Composition API verwenden, ist die Art und Weise, wie die übergeordnete Gruppe zuhört, dieselbe.

<Hallo Welt @update='inputUpdated'/>

Zunächst können wir $ event訪問傳遞.

Wenn in der Komponenten emit ein Wert übergeben wird, können wir ihn auf zwei verschiedene Arten erfassen, je nachdem, ob wir ihn inline oder mithilfe einer Methode verwenden.

Die erste besteht darin, $event in der Vorlage zu verwenden, um auf den übergebenen Wert zuzugreifen.

<HalloWelt @update='inputUpdated($event)'/>

Die zweite Methode besteht darin, eine Methode zur Behandlung des Ereignisses zu verwenden, und der übergebene Wert wird automatisch als erster Parameter an unsere Methode übergeben.

<Hallo Welt @update='inputUpdated'/>

// ...

Methoden: {
    inputUpdated: (Wert) => {
      console.log(Wert) // FUNKTIONIERT AUCH
    }
}

Mausmodifikatoren

Hier ist eine Liste der wichtigsten DOM-Mausereignisse, die wir in der v-on-Direktive erfassen können:

<div 
  @mousedown='Ereignis verarbeiten'
  @mouseup='Ereignis verarbeiten'
  @click='Ereignis verarbeiten'
  @dblclick='Ereignis verarbeiten'
  @mousemove='Ereignis verarbeiten'
  @mouseover='Ereignis verarbeiten'
  @mousewheel='Ereignis verarbeiten'
  @mouseout='Ereignis verarbeiten'
>
Interagiere mit mir!
</div>

Für Klickereignisse können wir auch Mausereignismodifikatoren hinzufügen, um einzuschränken, welche Maustaste unser Ereignis auslöst. Es gibt drei: left，right und middle .

<!-- Dadurch wird nur die linke Maustaste ausgelöst-->
<div @mousedown.left='handleLeftClick'> Links </div>

4. Tastaturmodifikatoren

Es gibt drei DOM-Tastaturereignisse, die wir abhören können:

<Eingabe
   Typ='Text'
   Platzhalter='Geben Sie etwas ein'
   @keypress='handleKeyPressed'
   @keydown='keyDown-Handle'
   @keyup='handleKeyUp'
/>

Normalerweise möchten wir diese Ereignisse bei einer bestimmten Taste erkennen. Hierzu gibt es zwei Möglichkeiten.

1. keycodes
2. Vue hat Aliase für einige Tasten ( enter , tab , delete , esc , space , up , down , left , right ).
   

<!-- Auch bei Loslassen der Eingabetaste auslösen -->
<Eingabe
   Typ = "Text"
   Platzhalter='Geben Sie etwas ein'
   @keyup.enter='handleEnter'
/>

<!-- ODER -->
<Eingabe
   Typ = "Text"
   Platzhalter='Geben Sie etwas ein'
   @keyup.13='handleEnter'
/>

5. Systemmodifikatoren

Bei manchen Projekten möchten wir möglicherweise nur dann ein Ereignis auslösen, wenn der Benutzer eine Modifikatortaste gedrückt hält. Modifikatortasten sind wie Befehls- oder Umschalttasten.

In Vue gibt es vier Systemmodifikatoren .

1. shift
2. alt
3. ctrl
4. meta ( CMD auf mac , Windows鍵unter Windows )
   

Dies ist nützlich zum Erstellen von Funktionen wie benutzerdefinierten Tastaturkürzeln in Ihren Vue -Anwendungen.

<!-- Benutzerdefinierte Tastenkombination, Yang verwendet Umschalt + 8, um eine Liste zu erstellen -->
<Eingabe
   Typ='Text'
   Platzhalter='Geben Sie etwas ein'
   @keyup.shift.56='Liste erstellen'
/>

Aus der Vue Dokumentation geht außerdem hervor, dass es einen exact Modifikator gibt, der dafür sorgt, dass das Event nur dann ausgelöst wird, wenn die von uns angegebene Taste gedrückt wird und keine anderen Tasten gedrückt werden.

<!-- Benutzerdefinierte Tastenkombinationen, nur durch Drücken von Umschalt + 8 wird eine Liste erstellt-->
<Eingabe
   Typ='Text'
   Platzhalter='Geben Sie etwas ein'
   @keyup.shift.56.exact='Liste erstellen'
/>

6. Ereignismodifikatoren

Wie bei allen DOM -Ereignissen können wir einige Modifikatoren verwenden, um ihre Funktionsweise zu ändern. Vue verfügt über zwei integrierte DOM -Ereignismodifikatoren, um sowohl die Ausbreitung zu stoppen als auch die Standardaktion zu verhindern.

<!-- Standardverhalten verhindern -->
<form @submit.prevent>

<!-- Hör auf zu sprudeln -->
<form @submit.stop='submitForm'>

<!-- Standardverhalten und Aufsteigen verhindern -->
<form @submit.stop.prevent='submitForm'>

<!-- Mehrfaches Auslösen von Ereignissen verhindern -->
<div @close.once='handleClose'> 

Es gibt keine Möglichkeit, in Echtzeit zu wissen, welche Fehler nach der Bereitstellung des Codes vorhanden sein könnten. Um diese Fehler anschließend zu beheben, wurde viel Zeit mit dem Debuggen von Protokollen verbracht. Hier möchte ich ein nützliches Tool zur Fehlerüberwachung empfehlen: Fundebug.

Dies ist das Ende dieses Artikels über den Vue Event Handling Guide von Vue3. Weitere relevante Inhalte zum Vue Event Handling Guide finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!