前言

今天在使用自寫組件時，突然遇到久違的冒泡事件，就想著使用Vue自帶的事件修飾符(.stop)，本以為可以就此解決冒泡，卻遇到這個問題。

腦中一片問號？？？？這是什么鬼，我是按照Vue文檔寫的啊(吐血)

于是，我開始踏上了解決錯誤的路程

程序員常規(guī)操作：

打開瀏覽器–百度/谷歌搜一搜，發(fā)現(xiàn)搜出來的東西不少，沒一個是能解決我的問題的答案，沒辦法Vue文檔走起?。。?！
看了至少幾十遍Vue文檔的我，自以為沒有看漏什么東西，確信Vue文檔也沒有解決這種問題的答案，苦苦尋找，來到這里

嗯？這個event.stopPropagation()？？？

頓時靈光一現(xiàn)！?。?！

既然是event.stopPropagation()可以觸發(fā)，那我把event傳遞過去，問題是不是就可以解決了。說干就干?。?/p>

開始素人 代碼修改

使用自定義組件如下：

來看看控制臺輸出

可以了?。。。?！可是，為什么會輸出兩次呢？？？？本想著解決就行了，但是，奇怪的好奇心出來了。

開始踏上尋找觸發(fā)兩次BUG的路程

嘗試加上.once修飾符，發(fā)現(xiàn)無效，多點幾下，發(fā)現(xiàn)都是觸發(fā)兩次

奇奇怪怪的！這是什么鬼啊?。。?！

繼續(xù)嘗試使用Vue事件修飾符.once，出現(xiàn)了如下輸出

確實是可以只觸發(fā)一次了，可是第一次為什么會蹦出來兩次打印?。。。。〞灒?/p>

問題沒有完全解決，繼續(xù)找。。。。

查看打印時間戳(timeStamp)，都是同一時間觸發(fā)，這可不好弄啊

繼續(xù)使用瀏覽器搜索

靈感來了，用setTimeout強制只能觸發(fā)一次怎么樣？

開始代碼改造

好了，看看效果

成功?。。?！一路坎坷的解決了?。?！

總結(jié)

到此這篇關(guān)于Vue自定義組件使用事件修飾符的文章就介紹到這了,更多相關(guān)Vue使用事件修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！