Vue3 防止子组件触发父组件 点击事件

最新推荐文章于 2025-01-24 16:18:46 发布
最新推荐文章于 2025-01-24 16:18:46 发布
阅读量845 收藏
点赞数
文章标签： vue.js 前端 javascript ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pphboy/article/details/132980664
版权
在开发中遇到一个问题，即在创建todocard时，点击子组件的checkbox会触发父组件的事件。为了解决这个问题，可以在子组件的checkbox上使用@click.stop修饰符，这可以防止事件继续向上层传播，从而避免父组件的响应。这样，点击子组件时，只会执行子组件的相关逻辑，不会影响父组件的行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求：我在写一个todocard,当我点击checkbox时候，父组件也会触发。
我需要在点击子组件checkbox的时候，父组件不触发。

解决方案：
在子组件上加 @click.stop

image

皮豪kbug
关注
Vue3-21-组件-子组件给父组件发送事件
northcastle的博客
12-16 1671
Vue3 中 子组件给父组件发送事件的操作流程详解
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
关于在Vue中如何阻止子元素触发父元素的事件
weixin_51747462的博客
04-18 2652
关于在Vue中如何阻止子元素触发父元素的事件
vue3阻止事件冒泡到父元素
最新发布
weixin_48420104的博客
01-24 850
使用.stop修饰符：最简单直接的方式。在事件处理函数中调用：提供更灵活的控制。使用.self修饰符：限制事件仅在元素本身触发。使用.capture和.stop组合：适用于复杂场景。选择哪种方法取决于你的具体需求和场景。
vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发
weixin_44509776的博客
04-11 6436
在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？
vue中点击父容器不触发子容器
qq_43351249的博客
06-01 1865
阻止事件冒泡的行为
vue3 和风天气组件阻止点击跳转事件
qq_38884788的博客
04-10 196
和风天气插件阻止点击事件
vue父组件点击触发子组件事件的实例讲解
08-28
Vue 父组件点击触发子组件事件的实例讲解 以下是该资源的知识点总结： 一、 Vue 父组件点击触发子组件事件的实例讲解 * 在 Vue 中，父组件可以通过 ref 属性来注册子组件的引用信息，从而实现父子组件之间的通信...
vue父组件触发事件改变子组件的值的方法实例详解
10-17
本篇文章将详细讲解如何在Vue中实现父组件触发事件来改变子组件的值。 首先，我们要理解Vue中的父子组件通信机制。Vue提供了多种方式来进行这种通信： 1. **通过props向下传递数据**：父组件可以通过props属性将...
vue中如何让子组件修改父组件数据
08-27
Vue 中子组件修改父组件数据是指在 Vue 中，子组件如何修改父组件的数据。这种情况在开发中经常遇到，例如在表单提交时，子组件需要将数据传递给父组件进行处理。在 Vue 中，子组件修改父组件数据的方式有多种，...
详解vue.js2.0父组件点击触发子组件方法
10-19
组件之间的交互是构建复杂应用不可或缺的一部分，其中父组件触发子组件方法是一种常见的交互模式。 首先，要理解父组件如何触发子组件方法，必须掌握Vue.js中的事件处理和数据流的基本概念。在Vue.js中，子组件可以...
vue3取消对象响应式
m0_64760349的博客
10-28 703
发送消息后正常将msgInfo装入chatUserInfo，以显示新的聊天内容，以上功能都正常。也就是说聊天框内的msgInfo修改，那么chatUserInfo也就是聊天记录也会修改。这是因为chatUserInfo所装的msgInfo都是响应式的并且都是同一个对象。但是这里发现修改msgInfo 聊天记录的内容也会修改。所以我们要让添加的msgInfo不是响应式的。说明插入的msgInfo一直是同一个对象。准备一个对象，还有一个装该对象的数组。可以发现使用toRaw的是普通对象了。
在 vue3 中用 event.stopPropagation() 方法阻止冒泡触发事件
lan_zh的专栏
11-28 6405
方法可以阻止事件的默认行为，但是它不会影响事件的冒泡行为。在 Vue 3 中，同时存在事件时，例如@click 事件，那么当用户点击的时候，默认会先触发。可以用于阻止链接的默认跳转行为或提交表单等默认操作。通常我们在触发子标签的时候，我们不需要触发。点击事件，然后再冒泡触发。的事件，那么需要用到。在vue 3 中，当。
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
热门推荐
孙悟空
06-30 1万+
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
vue点击子元素不触发父元素的注意事项
2202_75496303的博客
02-05 650
必须是click.stop事件，如果没用给你个空的事件即可。注意不能给鼠标滑动等事件做冒泡处理，没用。虽然是个很简单的问题。
vue中阻止click事件冒泡,防止触发另一个事件的方法
Misnice的博客
04-24 2130
使用vue阻止子级元素的click事件冒泡，不用触发父级元素的点击事件，用stop 1 2 3 4 <div @click="test1()"> <div@click.stop="test2()">按钮</div> </div> 这样点击按钮，就不会触发父级...
vue阻止子元素触发父元素的事件，事件冒泡处理
java_xxxx的博客
02-24 5834
vue阻止子元素触发父元素的事件，事件冒泡处理
Vue基础3之事件处理
qq_34306228的博客
11-08 4204
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
vue3子组件触发父组件事件
08-16
在Vue3中，子组件可以通过使用`defineEmits`函数定义自己的事件，并通过`emit`方法触发该事件，从而将数据传递给父组件。下面是一个示例代码，展示了子组件触发父组件事件的两种写法。 第一种写法是在子组件中使用`defineEmits`函数定义子组件的事件，并通过`emit`方法触发该事件。父组件使用`@子组件触发的方法名`监听该事件，并在父组件中定义相应的方法。代码如下： ```javascript // 子组件 const emit = defineEmits(["changeData"]); const changeTotal = (form) => { emit("changeData", form); }; // 父组件 <my-childe @changeData="父组件方法名"></my-childe> ``` 第二种写法是在子组件中通过`props`方式将父组件的方法传递给子组件，并在子组件中调用该方法来触发父组件事件。代码如下： ```javascript // 父组件 <my-childe :xx="父组件方法名"></my-childe> // 子组件 props: [&#39;xx&#39;], <div @click="xx">点击调用父组件传过来的方法</div> ``` 以上两种方式都可以实现子组件触发父组件事件的效果。根据具体需求选择适合的方式即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3子组件调用父组件的方法](https://blog.csdn.net/weixin_51924709/article/details/126344051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [[vue3] 子组件调用父组件的多种方法](https://blog.csdn.net/wyy7293/article/details/123918547)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值