前言

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

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

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

程式設計師常規操作：

開啟瀏覽器–百度/谷歌搜一搜，發現搜出來的東西不少，沒一個是能解決我的問題www.cppcns.com的答案，沒辦法Vue文件走起！！！！
看了至少幾十遍Vue文件的我，自以為沒有看漏什麼東西，確信Vue文件也沒有解決這種問題的答案，苦苦尋找，來到這裡

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

頓時靈光一現！！！！

既然是event.stopPropagation()可以觸發，那我把event傳遞過去，問題是不是就可以解決了。說幹就幹！！

開始素人 程式碼修改

使用自定義元件如下：

來看看控制檯輸出

可程式設計客棧以了！！！！！可是，為什麼會輸出兩次呢？？？？本想著解決就行了，但是，奇怪的好奇心出來了。

開始踏上尋找觸發兩次BUG的路程

嘗試加上.once修飾符，發現無效，多點幾下，發現都是觸發兩次

奇奇怪怪的！這是http://www.cppcns.com什麼鬼啊！！！！

繼續嘗試使用Vue事件修飾符.once，出現瞭如下輸出

確實是可以只觸發一次了，可是第一次為什麼會蹦出來兩次列印啊！！！（暈）

問題沒有完全解決，繼續找。。。。

檢視列印時間戳(timeStamp)，都是同一時間觸發，這可不好弄啊

繼續使用MvLjX瀏覽器搜尋

靈感來了，用setTimeout強制只能觸發一次怎麼樣？

開始程式碼改造

好了，看看效果

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

總結

到此這篇關於Vue自定義元件使用事件修飾符的文章就介紹到這了,更多相關Vue使用事件修飾符內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！