vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
类别:编程学习 浏览量:1122
时间:2022-01-27 01:35:05 vue自定义组件修饰符
Vue自定义组件使用事件修饰符的踩坑记录前言
今天在使用自写组件时,突然遇到久违的冒泡事件,就想着使用Vue自带的事件修饰符(.stop),本以为可以就此解决冒泡,却遇到这个问题。
脑中一片问号????这是什么鬼,我是按照Vue文档写的啊(吐血)
于是,我开始踏上了解决错误的路程
程序员常规操作:
打开浏览器–百度/谷歌搜一搜,发现搜出来的东西不少,没一个是能解决我的问题的答案,没办法Vue文档走起!!!!
看了至少几十遍Vue文档的我,自以为没有看漏什么东西,确信Vue文档也没有解决这种问题的答案,苦苦寻找,来到这里
嗯?这个event.stopPropagation()???
顿时灵光一现!!!!
既然是event.stopPropagation()可以触发,那我把event传递过去,问题是不是就可以解决了。说干就干!!
开始素人 代码修改
使用自定义组件如下:
来看看控制台输出
可以了!!!!!可是,为什么会输出两次呢????本想着解决就行了,但是,奇怪的好奇心出来了。
开始踏上寻找触发两次BUG的路程
尝试加上.once修饰符,发现无效,多点几下,发现都是触发两次
奇奇怪怪的!这是什么鬼啊!!!!
继续尝试使用Vue事件修饰符.once,出现了如下输出
确实是可以只触发一次了,可是第一次为什么会蹦出来两次打印啊!!!(晕)
问题没有完全解决,继续找。。。。
查看打印时间戳(timeStamp),都是同一时间触发,这可不好弄啊
继续使用浏览器搜索
灵感来了,用setTimeout强制只能触发一次怎么样?
开始代码改造
好了,看看效果
成功!!!!一路坎坷的解决了!!!
总结
到此这篇关于Vue自定义组件使用事件修饰符的文章就介绍到这了,更多相关Vue使用事件修饰符内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue的修饰符都有哪些(详解Vue的sync修饰符)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
热门推荐
- win2008设置ftp服务器(Windows Server 2008 如何设置FTP功能并开设网站)
- SQL Server中SET赋值和SELECT赋值
- pythonselenium怎么设置元素(Python2 Selenium元素定位的实现8种)
- 在php中与数据库连接的技术(PHP7.0连接DB操作实例分析基于mysqli)
- html中table怎么用(详解CSS的table-layout属性的用法)
- 详解如何获取localStorage最大存储大小的方法(详解如何获取localStorage最大存储大小的方法)
- docker怎么连接mysql(docker如何安装mysql)
- dubbo和项目搭建(使用docker部署dubbo项目的方法步骤)
- vue应用转flutter(Vue和Flask通信的实现)
- mysql中FIND_IN_SET函数