Vue3 事件处理指南：发出自定义事件

Vue事件处理是每个Vue项目必不可少的一部分，包括捕获用户输入、共享数据以及其他许多创造性的方式。

本文在介绍基础知识的同时，还将提供一些处理事件的代码示例。

基本事件处理

使用v-on指令（简写为@），我们可以监听DOM事件并运行处理程序方法或内联JavaScript代码。

<div v-on:click="handleClick" /><div @click="handleClick" />

发出自定义事件

web框架中的一个常见用例是希望子组件能够向其父组件发出事件。意味着允许双向数据绑定。

其中一个示例是将数据从输入组件发送到父表单。

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

在Options API中，我们可以直接调用this.$emit(eventName, payload)。

组件示例如下：

Options API

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

但是，Composition API有不同的this引用。所以，我们可以使用Vue3 setup方法直接访问emit方法。

setup方法的第二个参数是上下文变量，它包含三个属性：attrs、slots，以及对我们来说最重要的emit。

只要导入上下文对象，我们就可以通过与Options API相同的参数调用emit。

Composition API

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

有一种整理代码的方法是使用对象解构直接导入emit。如下所示。

对象解构的简写方法

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

非常出色。

无论我们使用的是Options还是Composition API，父组件都以相同的方式监听事件。

<HelloWorld @update=inputUpdated/>

如果发出的方法也传递了一个值，那么我们可以通过两种不同的方式进行捕获——取决于是内联还是使用其他方法。

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

<HelloWorld @update="inputUpdated($event)" />

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

<template>  <HelloWorld @update="inputUpdated" />  <template>    <script>      // ...      methods: {       inputUpdated: (value) => {        console.log(value) // WORKS TOO       }      }    </script></template  ></template>

处理鼠标事件修饰符

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

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

对于点击事件，我们还可以添加鼠标事件修饰符来限制哪些鼠标按钮会触发事件。有三个事件（每个按钮一个）：left、right和middle。

<!-- This will only trigger for the left mouse click --><div @mousedown.left=handleLeftClick> Left </div>

键盘事件修饰符

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

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

通常，如果我们想在某个键上检测这些事件，有两种方法可以做到这一点。

• 键码
• Vue对于某些键的别名（enter、tab、delete、esc、space、up、down、left、right）

<!-- Trigger even when enter is released --><input   type=text   placeholder=Type something   @keyup.enter=handleEnter/><!-- OR --><input   type=text   placeholder=Type something   @keyup.13=handleEnter/>

系统修饰符

对于某些项目，我们可能只想在用户按下修饰符键时才触发事件。修饰符键有点类似于command或shift。

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

• shift
• alt
• ctrl
• meta（mac上是cmd，windows上是windows键）

这在Vue应用程序中创建自定义键盘快捷键等功能时非常有用。

<!-- Custom Shortcut that creates a list for Shift + 8 --><input   type=text   placeholder=Type something   @keyup.shift.56=createList/>

浏览Vue文档，我们发现还有一个exact修饰符，用于确保只有当我们指定的键被按下时才会触发事件。

<!-- Custom Shortcut that creates a list for Shift + 8 ONLY --><input   type=text   placeholder=Type something   @keyup.shift.56.exact=createList/>

事件修饰符

对于所有DOM事件，我们可以使用修饰符来改变其运行方式。无论是停止传播还是阻止默认操作，Vue皆有相应的内置DOM事件修饰符。

<!-- Prevent Default Action --><form @submit.prevent><!-- Stop Event Propagation --><form @submit.stop=submitForm><!-- Easy to Join Modifiers --><form @submit.stop.prevent=submitForm><!-- Prevent event from being triggered more than once --><div @close.once=handleClose>

总结

希望这份简短的备忘单能帮助大家更好地了解Vue事件处理。