Vue自定義組件使用事件修飾符的踩坑記錄
前言
今天在使用自寫組件時，突然遇到久違的冒泡事件，就想著使用Vue自帶的事件修飾符(.stop)，本以為可以就此解決冒泡，卻遇到這個問題。
腦中一片問號？？？？這是什么鬼，我是按照Vue文檔寫的啊(吐血)
于是，我開始踏上了解決錯誤的路程
程序員常規(guī)操作：
打開瀏覽器–百度/谷歌搜一搜，發(fā)現(xiàn)搜出來的東西不少，沒一個是能解決我的問題的答案，沒辦法Vue文檔走起?。。?！
看了至少幾十遍Vue文檔的我，自以為沒有看漏什么東西，確信Vue文檔也沒有解決這種問題的答案，苦苦尋找，來到這里
嗯？這個event.stopPropagation()？？？
頓時靈光一現(xiàn)?。。?！
既然是event.stopPropagation()可以觸發(fā)，那我把event傳遞過去，問題是不是就可以解決了。說干就干??！
開始素人 代碼修改
使用自定義組件如下：
來看看控制臺輸出
可以了?。。。。】墒?，為什么會輸出兩次呢？？？？本想著解決就行了，但是，奇怪的好奇心出來了。
開始踏上尋找觸發(fā)兩次BUG的路程
嘗試加上.once修飾符，發(fā)現(xiàn)無效，多點幾下，發(fā)現(xiàn)都是觸發(fā)兩次
奇奇怪怪的！這是什么鬼啊?。。?！
繼續(xù)嘗試使用Vue事件修飾符.once，出現(xiàn)了如下輸出
確實是可以只觸發(fā)一次了，可是第一次為什么會蹦出來兩次打印啊?。。。〞灒?/p>
問題沒有完全解決，繼續(xù)找。。。。
查看打印時間戳(timeStamp)，都是同一時間觸發(fā)，這可不好弄啊
繼續(xù)使用瀏覽器搜索
靈感來了，用setTimeout強(qiáng)制只能觸發(fā)一次怎么樣？
開始代碼改造
好了，看看效果
成功?。。?！一路坎坷的解決了！??！
總結(jié)
到此這篇關(guān)于Vue自定義組件使用事件修飾符的文章就介紹到這了,更多相關(guān)Vue使用事件修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)
這篇文章主要介紹了Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了Vscode如何創(chuàng)建vue項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue中在vuex的actions中請求數(shù)據(jù)實例
今天小編就為大家分享一篇vue中在vuex的actions中請求數(shù)據(jù)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
指令是Vue.js中一個重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10
在Vue3中創(chuàng)建和使用全局組件的實現(xiàn)方式
在前端開發(fā)中,Vue.js 是一個廣泛使用的框架,因其靈活性和強(qiáng)大的功能,得到許多開發(fā)者的喜愛,Vue 3 的發(fā)布為這一框架帶來了很多新的特性和改進(jìn),在本文中,我們將詳細(xì)討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過示例代碼展示具體實現(xiàn)方式,需要的朋友可以參考下2024-07-07
構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項目的10條建議(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11