Vue事件,vue3自定义事件
Vue事件处理是每个Vue项目的一个必要方面。它被用来捕捉用户输入，共享数据和许多其他创造性的方式。在本文中，我们将介绍一些基础知识，并提供一些处理事件的代码示例。有需要的可以参考下面文章的具体内容。
目录
一、基本事件处理二。向父组件III发送自定义事件。鼠标修饰符IV。键盘修饰词v .系统修饰词VI。事件修改器
一、基本事件处理
使用v-on指令(简称@指令)，我们可以监听DOM事件并运行处理程序方法或内联Javascript。
//v-on指令
div v-on:click=handleClick /
//或者
div @click=handleClick /
二、向父组件发出自定义事件
任何Web框架中的一个常见用例是，子组件可以向其父组件发送事件，这也是双向数据绑定的原则。
一个常见的例子是将数据从输入组件发送到父表单。
根据我们使用的是Options API还是Composition API，发出事件的语法是不同的。
在Options API中，我们可以简单地称之为。$ emit(事件名称，有效负载)，示例如下：。
导出默认值{
方法：{
handleUpdate: ()={
这个。$emit(更新， Hello World )
}
}
}
但是，组合API的使用方式不同。需要在Vue3提供的设置方法中使用emit方法。
只要导入了上下文对象，就可以使用与选项API相同的参数来调用emit。
导出默认值{
设置(道具、上下文){
const handleUpdate=()={
context.emit(update ， Hello World )
}
返回{ handleUpdate }
}
}
当然，我在项目中经常使用解构的方式来使用：。
导出默认值{
设置(道具，{ emit }) {
const handleUpdate=()={
发出(更新， Hello World )
}
返回{ handleUpdate }
}
}
完美！
无论我们使用Options还是Composition API，父组都以同样的方式监听。
hello world @ update= input updated /
首先，我们可以在模板中使用$ event来访问传递的值。
如果在组件发出方法中有一个传递值，我们可以用两种不同的方法捕获它，这取决于我们是使用内联还是方法。
第一种：是在模板中使用$event access传递的值。
hello world @ update= input updated($ event)/
第二种：使用方法处理事件，那么传递的值将自动作为第一个参数传递给我们的方法。
hello world @ update= input updated /
//.
方法：{
inputUpdated:(值)={
console.log(value) //也可以
}
}
三、鼠标修饰符
下面是我们可以在v-on指令中捕获的主要DOM鼠标事件的列表：
差异
@mousedown=handleEvent
@mouseup=handleEvent
@click=handleEvent
@dblclick=handleEvent
@mousemove=handleEvent
@mouseover=handleEvent
@mousewheel=handleEvent
@mouseout=handleEvent
和我互动！
/div
对于点击事件，我们还可以添加鼠标事件修饰符来限制哪个鼠标按钮将触发我们的事件。有三个：左、右、中。
！-这只会触发鼠标左键-
div @ mousedown . Left= handle Left click Left/div
四、键盘修饰符
我们可以听三个DOM键盘事件：
投入
type=text
placeholder=键入内容
@ keypress= handleKeyPressed
@keydown=handleKeyDown
@keyup=handleKeyUp
/
通常，我们希望检测一个键上的这些事件，有两种方法可以做到这一点。
键码
e有一些键的别名(enter，tab，delete，ESC，space，up，down，left，right)。
！-即使松开enter键也会触发-
投入
type=text
placeholder=键入内容
@keyup.enter=handleEnter
/
！-或者-
投入
type=text
placeholder=键入内容
@keyup.13=handleEnter
/
五、系统修饰符
对于某些项目，我们可能只想在用户按下修饰键时触发事件。修饰键类似于Command或shift。
在Vue，有四个系统修饰符。
变化
中高音
计算机的ctrl按键
meta(MAC上的CMD和Windows上的Windows键)
这对于在Vue应用中创建自定义键盘快捷键等功能非常有用。
！-自定义快捷键，杨使用Shift 8创建列表-
投入
type=text
placeholder=键入内容
@keyup.shift.56=createList
/
在Vue文档中，也有一个确切的修饰符，以确保只有当我们指定的键被按下并且没有其他键时才触发事件。
！-自定义快捷键，只有按下Shift 8才会创建列表-
投入
type=text
placeholder=键入内容
@ keyup . shift . 56 . exact= create list
/
六、事件修饰符
对于所有DOM事件，我们可以使用一些修饰符来改变它们的运行方式。Vue有两个内置的DOM事件修改器，不管是停止传播还是阻塞默认操作。
！-防止默认行为-
form @submit.prevent
！-别冒泡了
form @submit.stop=submitForm
！-防止默认行为和冒泡-
form @ submit . stop . prevent= submit form
！-防止事件被多次触发-
div @close.once=handleClose
没有办法知道代码实时部署后可能存在的bug。之后为了解决这些bug，在日志调试上花了大量的时间。这里顺便推荐一个简单易用的bug监控工具Fundebug。
这就是这篇关于Vue3的Vue事件处理指南的文章。有关Vue事件处理指南的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。