【Vue3更新】Vue事件处理指南

作者：FernandoDoglio译者：前端小智来源：medium有梦想，有干货，微信搜索【大招天下】关注这位还在洗碗的洗碗智慧清晨的菜肴。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue事件处理是每个Vue项目的必要方面。它用于捕获用户输入、共享数据和许多其他创造性的方式。在本文中，我介绍了基础知识并提供了一些用于处理事件的代码示例。它只包含我认为最有用的技巧/方法，要深入了解Vue可以做的一切，请查看Vue文档。基本事件处理使用v-on指令（简称@），我们可以监听DOM事件并运行处理程序方法或内联Javascript。//v-on指令//或向父组件发出自定义事件任何Web框架中的常见用例是期望子组件可以向其父组件发出事件，这也是双向数据绑定的原理。一个常见的例子是将数据从输入组件发送到父表单。根据我们使用的是OptionsAPI还是CompositionAPI，发出事件的语法会有所不同。在OptionsAPI中，我们可以简单调用this.$emit(eventName,payload)，示例如下：exportdefault{methods:{handleUpdate:()=>{this.$emit('update','HelloWorld')}}}但是，CompositionAPI的使用方式有所不同。emit方法需要在Vue3提供的setup方法中使用。只要导入上下文对象，就可以使用与OptionsAPI相同的参数调用emit。exportdefault{setup(props,context){consthandleUpdate=()=>{context.emit('update','HelloWorld')}return{handleUpdate}}}当然我经常在项目中使用解构来使用：exportdefault{setup(props,{emit}){consthandleUpdate=()=>{emit('update','HelloWorld')}return{handleUpdate}}}完美！无论我们使用Options还是CompositionAPI，父组的监听方式都是一样的。首先，我们可以在模板中使用$event来访问传递的值。如果在组件的emit方法中传递了一个值，我们可以通过两种不同的方式捕获它，这取决于我们是使用内联还是使用方法。第一种是在模板中使用$event来访问传递的值。其次，使用一个方法来处理事件，那么传入的值会自动作为第一个参数传递给我们的方法。//...methods:{inputUpdated:(value)=>{console.log(value)//WORKSTOO}}Mousemodifier下面是我们可以在v-ondirective捕获的主要DOM鼠标事件列表：mousewheel='handleEvent'@mouseout='handleEvent'>InteractwithMe!