Vue自定义组件使用事件修饰符的踩坑记录
更新时间：2021年05月23日 12:54:11 作者：不愿透露姓名的余菜鸟
vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，下面这篇文章主要给大家介绍了关于Vue自定义组件使用事件修饰符的相关资料,需要的朋友可以参考下
前言
今天在使用自写组件时，突然遇到久违的冒泡事件，就想着使用Vue自带的事件修饰符(.stop)，本以为可以就此解决冒泡，却遇到这个问题。
脑中一片问号？？？？这是什么鬼，我是按照Vue文档写的啊(吐血)
于是，我开始踏上了解决错误的路程
程序员常规操作：
打开浏览器–百度/谷歌搜一搜，发现搜出来的东西不少，没一个是能解决我的问题的答案，没办法Vue文档走起！！！！
看了至少几十遍Vue文档的我，自以为没有看漏什么东西，确信Vue文档也没有解决这种问题的答案，苦苦寻找，来到这里
嗯？这个event.stopPropagation()？？？
顿时灵光一现！！！！
既然是event.stopPropagation()可以触发，那我把event传递过去，问题是不是就可以解决了。说干就干！！
开始素人 代码修改
使用自定义组件如下：
来看看控制台输出
可以了！！！！！可是，为什么会输出两次呢？？？？本想着解决就行了，但是，奇怪的好奇心出来了。
开始踏上寻找触发两次BUG的路程
尝试加上.once修饰符，发现无效，多点几下，发现都是触发两次
奇奇怪怪的！这是什么鬼啊！！！！
继续尝试使用Vue事件修饰符.once，出现了如下输出
确实是可以只触发一次了，可是第一次为什么会蹦出来两次打印啊！！！（晕）
问题没有完全解决，继续找。。。。
查看打印时间戳(timeStamp)，都是同一时间触发，这可不好弄啊
继续使用浏览器搜索
灵感来了，用setTimeout强制只能触发一次怎么样？
开始代码改造
好了，看看效果
成功！！！！一路坎坷的解决了！！！
总结
到此这篇关于Vue自定义组件使用事件修饰符的文章就介绍到这了,更多相关Vue使用事件修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了如何在Vue3中处理异步API调用并更新表单数据（附Demo）,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了详解vue的数据binding原理介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家详细介绍了Vue中如何使用echarts实现绘制人体动态图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要为大家介绍了vue pdf二次封装解决无法显示中文问题方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
这篇文章主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Vscode如何创建vue项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
今天小编就为大家分享一篇vue中在vuex的actions中请求数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
指令是Vue.js中一个重要的特性， 主要提供了一种机制将数据的变化映射为DOM行为。下面通过本文给大家分享Vue.js的组件和模板，需要的朋友参考下吧2017-10-10
在前端开发中,Vue.js 是一个广泛使用的框架,因其灵活性和强大的功能,得到许多开发者的喜爱,Vue 3 的发布为这一框架带来了很多新的特性和改进,在本文中,我们将详细讨论如何在 Vue 3 中创建和使用全局组件,并通过示例代码展示具体实现方式,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了构建大型 Vue.js 项目的10条建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论