前言

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

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

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

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

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

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

頓時(shí)靈光一現(xiàn)?。。。?/p>

既然是event.stopPropagation()可以觸發(fā)，那我把event傳遞過(guò)去，問(wèn)題是不是就可以解決了。說(shuō)干就干??！

開始素人 代碼修改

使用自定義組件如下：

來(lái)看看控制臺(tái)輸出

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

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

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

奇奇怪怪的！這是什么鬼?。。。。?/p>

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

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

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

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

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

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

開始代碼改造

好了，看看效果

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

總結(jié)

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