“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

”

今天分享個技術塊兒。

在做項目的過程中，遇到了個問題，簡單的描述一下：有一個card卡片，上面綁定了個點擊事件，點擊card卡片，就會展示詳細信息。

這個很簡單，通過設置:visible.sync的屬性值即可，如果等于true,則彈出模態框，否則不彈出。

image-20211022182716991

橙色的就是小卡片，點擊彈出該模板的詳細信息。

但是現在有這樣的一個需求，在小卡片上添加了個垃圾桶圖標，點擊圖標，刪除該模板信息。在操作的時候會出現這樣的bug，點擊垃圾桶會觸發垃圾桶的點擊事件，但是也會觸發小卡片的點擊事件，如何才能點擊垃圾桶時不影響小卡片的點擊事件呢？

經過在網上搜索，最后發現垃圾桶的點擊事件可以這樣寫。

<i class="el-icon-delete" @click.stop="delGroupByTimechuo(itemAction.group.timechuo)"></i>

重點在@click.stop代碼上，不加.stop的話，就會觸發小卡片的點擊事件，加上之后只觸發當前垃圾桶圖標的點擊事件。

總結

以上是默认站点為你收集整理的vue中设置子组件的点击事件不影响父组件的点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得默认站点網站內容還不錯，歡迎將默认站点推薦給好友。