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'>