Vue事件处理指南– Vue3更新

做者：Fernando Doglio
译者：前端小智
来源：medium

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

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>

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

<!-- 这只会触发鼠标左键 -->
<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'
/>

系统修饰符

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

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

~ 完，我是刷碗智，我去刷碗了，骨得白~

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://learue.co/2020/01/a-v...

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及个人系列文章。