Vue事件处理指南– Vue3更新

摘要: Vue 事件处理是每个 Vue 项目的必要方面。

Fundebug经授权转载,版权归原作者所有。

Vue 事件处理是每个 Vue 项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。

在本文中,会介绍基础知识,并提供一些用于处理事件的代码示例。 它仅包含我认为最有用的技巧/方法,要深入了解 Vue 可以做的所有事情,请查看Vue 文档

基本事件处理

使用v-on指令(简称@),我们可以监听 DOM 事件并运行处理程序方法或内联 Javascript。

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

// OR

<div @click='handleClick' />

向父组件发出自定义事件

任何 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='inputUpdated'/>

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

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

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

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

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

<HelloWorld @update='inputUpdated'/>

// ...

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

鼠标修饰符

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

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

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

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

键盘修饰符

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

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

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

  1. keycodes
  2. 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'
/>

系统修饰符

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

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

  1. shift
  2. alt
  3. ctrl
  4. meta (在 mac 上是 CMD,在 Windows 上是 Windows 键)

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

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

在 Vue 文档中,还有一个exact的修饰符,以确保仅在按下我们指定的键且没有其他键的情况下才触发事件。

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

事件修饰符

对于所有 DOM 事件,我们可以使用一些修饰符来更改其运行方式。 无论是停止传播还是阻止默认操作,Vue 都有两个内置的 DOM 事件修饰符。

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

<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>

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

<!-- 防止事件被多次触发 -->
<div @close.once='handleClose'>

原文:https://learue.co/2020/01/a-vue-event-hanling-cheatsheet-the-essentials/

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了50亿+错误事件,付费客户有阳光保险、达令家、核桃编程、荔枝FM、微脉等众多品牌企业。欢迎大家免费试用

您的用户遇到BUG了吗?

体验Demo 免费使用