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

“

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

”

今天分享个技术块儿。

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

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

image-20211022182716991

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

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

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

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

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

vue中设置子组件的点击事件不影响父组件的点击事件相关推荐

ansys时间步长怎么设置_在 ANSYS Workbench 的动态、静态仿真中,设置子步长(时间步长)的目的分别是什么?_学小易找答案...
[计算题]塔架静力-地震响应谱分析 Course-Work8_塔架响应谱分析.pdf [简答题]简述虚位移原理与最小势能原理? [简答题]如何对草图中几何模型进行尺寸标注? [简答题]记3-5个单词 ...
VUE 中 keep-alive 的 --是什么-- 使用场景-- 作用-- 新增属性--动态组件--理解
KBK对keep-alive的一些见解(有不对之处,尽请告知,嘻嘻) Keep-alive是什么是Vue的内置组件包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. Keep-alive的使 ...
vue中局部页面跳转_vue使用感受（二）组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue中的render函数、h（）函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...

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

vue中设置子组件的点击事件不影响父组件的点击事件相关推荐

最新文章

热门文章