如何理解Vue3的事件处理和相关几种修饰符

本篇内容主要讲解“如何理解Vue3的事件处理和相关几种修饰符”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何理解Vue3的事件处理和相关几种修饰符”吧!

网站设计、成都网站建设的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给创新互联建站一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

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

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

基本事件处理

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

// v-on 指令   // OR  

向父组件发出自定义事件

任何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，父组监听的方式都是一样的。

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

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

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

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

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

鼠标修饰符

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

 Interact with Me!