vue中设置子组件的点击事件不影响父组件的点击事件

37ea361c882fe6330cebad5bc97e6f7a.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

今天分享个技术块儿。

在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击card卡片,就会展示详细信息。

这个很简单,通过设置:visible.sync的属性值即可,如果等于true,则弹出模态框,否则不弹出。

b76d22bcc7cf122970e22a117b5f344e.png
image-20211022182716991

橙色的就是小卡片,点击弹出该模板的详细信息。

但是现在有这样的一个需求,在小卡片上添加了个垃圾桶图标,点击图标,删除该模板信息。在操作的时候会出现这样的bug,点击垃圾桶会触发垃圾桶的点击事件,但是也会触发小卡片的点击事件,如何才能点击垃圾桶时不影响小卡片的点击事件呢?

经过在网上搜索,最后发现垃圾桶的点击事件可以这样写。

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

重点在@click.stop代码上,不加.stop的话,就会触发小卡片的点击事件,加上之后只触发当前垃圾桶图标的点击事件。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值