乐趣区

关于前端:Vue3更新Vue事件处理指南

jiezi

作者：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… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版