Wie geht Vue mit Ereignissen um? Einführung in relevantes Grundwissen

Dieser Artikel führt Sie in die Grundkenntnisse der Vue-Ereignisverarbeitung ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

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. [Verwandte Empfehlung: „vue.js Tutorial“]

In diesem Artikel stellen wir das Grundwissen vor und stellen einige Codebeispiele für den Umgang mit Ereignissen bereit. Es enthält nur die Tipps/Methoden, die ich am nützlichsten finde. Für einen tieferen Einblick in alles, was Vue kann, schauen Sie sich die Vue-Dokumentation an.

Grundlegende Ereignisbehandlung

Mit der v-on-Direktive (bezeichnet als @) können wir DOM-Ereignisse abhören und Handler-Methoden oder Inline-Javascript ausführen. v-on指令(简称@)，我们可以监听DOM事件并运行处理程序方法或内联Javascript。

// v-on 指令
<div v-on:click=&#39;handleClick&#39; />

// OR

<div @click=&#39;handleClick&#39; />

向父组件发出自定义事件

任何Web框架中的常见用例都是希望子组件能够向其父组件发出事件，这也是双向数据绑定原理。

常见一个示例是将数据从 input组件发送到父表单。

根据我们使用的是Options API还是Composition API，发出事件的语法是不同的。

在 Options API 中，我们可以简单地调用this.$emit(eventName, payload) ,示例如下：

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

但是，Composition API 使用方式与此不同。 需要在 Vue3 提供的 setup方法使用emit方法。

只要导入context对象，就可以使用与Options API相同的参数调用emit。

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

    return { handleUpdate }
  } 
}

当然，我在项目中经常使用解构的方式来使用：

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

    return { handleUpdate }
  } 
}

完美！

无论我们使用Options 还是 Composition API，父组监听的方式都是一样的。

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

首先，我们可以在模板中使用$ event访问传递的值。

如果在组件 emit 出去方法有传递值，我们可以通过两种不同的方式捕获它，这取决于我们是使用内联还是使用方法。

第一种是在模板中使用$event访问传递的值。

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

第二，使用方法来处理事件，则传递的值将作为第一个参数自动传递给我们的方法。

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

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

鼠标修饰符

下面是我们可以在v-on指令中捕获的主要DOM鼠标事件列表：

<div 
  @mousedown=&#39;handleEvent&#39;
  @mouseup=&#39;handleEvent&#39;
  @click=&#39;handleEvent&#39;
  @dblclick=&#39;handleEvent&#39;
  @mousemove=&#39;handleEvent&#39;
  @mouseover=&#39;handleEvent&#39;
  @mousewheel=&#39;handleEvent&#39;
  @mouseout=&#39;handleEvent&#39;
>
Interact with Me!
</div>

对于单击事件，我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个: left，right 和 middle。

<!-- 这只会触发鼠标左键 -->
<div @mousedown.left=&#39;handleLeftClick&#39;> Left </div>

键盘修饰符

我们可以听三个DOM键盘事件：

<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keypress=&#39;handleKeyPressed&#39;
   @keydown=&#39;handleKeyDown&#39;
   @keyup=&#39;handleKeyUp&#39;
/>

通常，我们想检测某个键上的这些事件，有两种方法可以执行此操作。

• keycodes

• Vue具有某些键的别名（enter, tab, delete, esc, space, up, down, left, right)

<!-- Trigger even when enter is released -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.enter=&#39;handleEnter&#39;
/>

<!-- OR -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.13=&#39;handleEnter&#39;
/>

系统修饰符

对于某些项目，我们可能只想在用户按下修饰键的情况下触发事件。 修饰键类似于Command或shift。

在Vue中，有四个系统修饰符。

• shift

• alt

• ctrl

• meta (在mac上是CMD，在Windows上是Windows键)

这对于在Vue应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。

<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56=&#39;createList&#39;
/>

在Vue文档中，还有一个exact

<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表-->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56.exact=&#39;createList&#39;
/>

Benutzerdefinierte Ereignisse an übergeordnete Komponenten senden

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

Ein häufiges Beispiel ist das Senden von Daten von der input-Komponente an das übergeordnete 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 einfach this.$emit(eventName, payload) aufrufen, das Beispiel sieht wie folgt aus:

<!-- 阻止默认行为 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop=&#39;submitForm&#39;>

<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent=&#39;submitForm&#39;>

<!-- 防止事件被多次触发 -->
<p @close.once=&#39;handleClose&#39;>

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

Solange das Kontextobjekt importiert ist, können Sie emit mit denselben Parametern wie die Options-API aufrufen. rrreee

Natürlich verwende ich in meinen Projekten häufig Dekonstruktion: 🎜rrreee🎜Perfekt! 🎜🎜Ob wir Optionen oder die Composition API verwenden, die Art und Weise, wie die übergeordnete Gruppe zuhört, ist die gleiche. 🎜rrreee🎜Zunächst können wir über $event in der Vorlage auf den übergebenen Wert zugreifen. 🎜🎜Wenn in der Emit-Methode der Komponente ein übergebener Wert vorhanden ist, können wir ihn auf zwei verschiedene Arten erfassen, je nachdem, ob wir Inline oder Methode verwenden. 🎜🎜Die erste besteht darin, $event in der Vorlage zu verwenden, um auf den übergebenen Wert zuzugreifen. 🎜rrreee🎜Zweitens: Verwenden Sie eine Methode, um das Ereignis zu verarbeiten. Anschließend wird der übergebene Wert automatisch als erster Parameter an unsere Methode übergeben. 🎜rrreee🎜Mausmodifikatoren🎜🎜Hier ist die Liste der wichtigsten DOM-Mausereignisse, die wir in der v-on-Direktive erfassen können: 🎜rrreee🎜Für Klickereignisse können wir auch Mausereignismodifikatoren zu Limit hinzufügen Welche Maustaste wird unser Ereignis auslösen? Es gibt drei: links, rechts und mitte. 🎜rrreee🎜Tastaturmodifikatoren🎜🎜Es gibt drei DOM-Tastaturereignisse, die wir abhören können: 🎜rrreee🎜Im Allgemeinen möchten wir diese Ereignisse auf einer bestimmten Taste erkennen. Es gibt zwei Möglichkeiten, dies zu tun. 🎜

• 🎜keycodes🎜
• 🎜Vue hat Aliase für bestimmte Tasten (enter, tab , delete, esc, space, up, down , links, rechts)🎜

rrreee🎜Systemmodifikatoren🎜🎜Bei einigen Projekten möchten wir die Modifikatortaste möglicherweise nur dann festlegen, wenn der Benutzer sie drückt Ereignis wird ausgelöst. Zusatztasten ähneln Befehl oder Umschalt. 🎜🎜In Vue gibt es vier Systemmodifikatoren. 🎜

• 🎜shift🎜
• 🎜alt🎜
• 🎜ctrl🎜
• 🎜 meta (CMD auf Mac, Windows-Taste auf Windows) 🎜

🎜Dies ist nützlich zum Erstellen von Dingen wie benutzerdefinierten Tastaturkürzeln in Vue-Anwendungen. 🎜rrreee🎜In der Vue-Dokumentation gibt es auch einen exact-Modifikator, um sicherzustellen, dass das Ereignis nur ausgelöst wird, wenn die von uns angegebene Taste gedrückt wird und keine anderen Tasten gedrückt werden. 🎜rrreee🎜🎜Ereignismodifikatoren🎜🎜🎜Für alle DOM-Ereignisse können wir einige Modifikatoren verwenden, um die Art und Weise ihrer Ausführung zu ändern. Unabhängig davon, ob die Weitergabe gestoppt oder Standardaktionen verhindert werden sollen, verfügt Vue über zwei integrierte DOM-Ereignismodifikatoren. 🎜rrreee🎜🎜Englische Originaladresse: https://segmentfault.com/a/1190000039938779🎜🎜Autor: Fernando Doglio🎜🎜Übersetzer: Front-end Xiaozhi🎜🎜🎜Weitere programmbezogene Kenntnisse finden Sie unter: 🎜Programmiervideo🎜 ! ! 🎜

Das obige ist der detaillierte Inhalt vonWie geht Vue mit Ereignissen um? Einführung in relevantes Grundwissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!