vue中设置子组件的点击事件不影响父组件的点击事件
【摘要】 编辑“大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。”今天分享个技术块儿。在做项目的过程中，遇到了个问题，简单的描述一下：有一个card卡片，上面绑定了个点击事件，点击card卡片，就会展示详细信息。这个很简单，通过设置:visible.sync的属性值即可，如果等于true,则弹出模态框，否则不弹出。编辑image-20211022182716991橙色的就是小卡片，点击弹出该模...
编辑
“
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。
”
今天分享个技术块儿。
在做项目的过程中，遇到了个问题，简单的描述一下：有一个card卡片，上面绑定了个点击事件，点击card卡片，就会展示详细信息。
这个很简单，通过设置:visible.sync的属性值即可，如果等于true,则弹出模态框，否则不弹出。
编辑
image-20211022182716991
橙色的就是小卡片，点击弹出该模板的详细信息。
但是现在有这样的一个需求，在小卡片上添加了个垃圾桶图标，点击图标，删除该模板信息。在操作的时候会出现这样的bug，点击垃圾桶会触发垃圾桶的点击事件，但是也会触发小卡片的点击事件，如何才能点击垃圾桶时不影响小卡片的点击事件呢？
经过在网上搜索，最后发现垃圾桶的点击事件可以这样写。
<i class="el-icon-delete" @click.stop="delGroupByTimechuo(itemAction.group.timechuo)"></i>
重点在@click.stop代码上，不加.stop的话，就会触发小卡片的点击事件，加上之后只触发当前垃圾桶图标的点击事件。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）