vue3中的事件修饰符详解
vue3中事件修饰符
vue3中的事件修饰符有：
.stop // 阻止事件传递 .prevent // 停止默认事件 .self // 自身执行 .capture // 使用捕获模式 .once // 只执行一次 .passive // 立即执行
1、.stop
作用：阻止冒泡事件
冒泡事件：子元素的事件传递到父元素，即你促发子元素的click事件，由于冒泡，会使外层的父元素的click事件同时触发。
<div @click="shout(1)">
<button @click="shout(2)">点击查看内容</button>
</div>内容弹出时先触发弹出2，再触发弹出1。
方法一：在子元素的click后面直接加上.stop，就可以阻止冒泡事件了：
<div @click="shout(1)">
<button @click.stop="shout(2)">点击查看内容</button>
</div>方法二：使用参数对象的stopDefault方法，如下：
<div @click="shout(1)">
<button @click="shout(2)">点击查看内容</button>
</div>
methods: {
shout(e){
e.stopDefault()
}
}2、.prevent
作用：阻止浏览器的默认事件
默认事件：移动端浏览器的下拉刷新事件、点击超链接会跳转页面.......
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="showInfo">点我提示信息</a>
如上面的示例，点击a标签就会跳转到新链接，这个时候我们需要阻止默认事件，除了去掉href链接这个方法外，还可以用prevent阻止默认事件。
方法一：在click后面直接加上.prevent，如下：
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">点我提示信息</a>
方法二：使用参数对象的preventDefault方法，如下：
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="showInfo($event)">点我提示信息</a>
methods: {
showInfo(e){
e.preventDefault()
}
}3、.self
作用：阻止自身事件促发，但不会阻止冒泡
<div class="outer" @click="outer">
<div class="middle" @click.self="middle">
<button @click="inner">点击</button>
</div>
</div>当我们点击button的时候，先执行inner，传递到middle，此时middle里有一个.self，.self阻止了middle的click事件，所以继续冒泡到outer，执行outer的click事件。
结果：执行click事件的顺序：inner ----> outer
4、.capture
作用：打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
<!-- captrue:使用事件的捕捉模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
上面的执行顺序是1、25、.once
作用：事件只触发一次（常用）
6、.passive
作用：事件的默认行为立即执行，无需等待事件回调执行完毕（不常用）
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue实现对highlight-current-row方式整行选中后修改默认背景颜色
这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了element-ui在table中如何禁用其中几行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了基于vue.js实现图片轮播效果，vue如何实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
vue路径分为绝对路径、相对路径、~+路径 及 别名+路径,在js中,引入带别名的文件路径,不需要在别名前加~ ,在css或者style中引入的需要在路径前面加~,路径以 ~ 开头,其后的部分将会被看作模块依赖,本文给大家介绍vue中引用文件路径问题,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了Vue开发环境跨域访问问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中，可以通过component标签的is属性动态指定标签，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
最近在项目中遇到了一个需求，我们通过Vue.nextTick()来解决这一需求，但发现网上这方面的资料较少，所以自己来总结下，下面这篇文章主要给大家介绍了关于Vue.nextTick()正确使用方法的相关资料，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了vue 监听窗口变化对页面部分元素重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧2021-07-07
Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法
最近在项目中使用 webpack 打包后升级，用户反馈使用浏览器（chrome 45）访问白屏。经过排查发现：由于 chrome 45 无法兼容 ES6 语法导致的，接下来给大家介绍下Vue中 引入使用 babel-polyfill 兼容低版本浏览器方法,需要的朋友可以参考下2023-02-02
最新评论