vue3中组件递归，子组件emit事件失效解决办法

已于 2024-01-08 14:24:19 修改
阅读量2.7k 收藏 9
点赞数 6
分类专栏： web 文章标签： vue.js 前端 javascript
于 2024-01-08 14:23:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_52273262/article/details/135456310
版权
本文探讨了在Vue应用中，使用Vuex/Pinia库来替换传统父子组件间的通信方式，以及通过在子组件监听emit事件的解决方案，同时提及了这种方法可能带来的控制台警告问题。

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

第一种解决方法

用vuex / pinia 代替父子通信

第二种解决办法

在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告

vue中子组件修改父组件数据报错
liuj_j的博客
06-11 809
vue中父子组件数据传递 解决在子组件中修改父组件传来的数据，报错如下： 在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's v.
Vue中emit事件无法触发的问题
y_hh_的博客
08-16 3991
在父组件中定义事件监听，会出现无法触发对应的事件函数，在下面的代码中，我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件，但尽管事件发生了， 但还是触发不了，这个问题在于v-on:event_1="handle"的位置，需要放在 <my-template :users=“users” v-on:event_1=“handle” ></my-template> 中。 <body> <div id='app' v-on:ev
Vue3+el-menu 递归 emit失效
weixin_43932309的博客
09-27 638
解决Vue3+el-menu 递归 emit失效问题
Vue.js 中 `$emit` 事件未监听的问题及解决方案
有我更精彩的博客
04-01 668
Vue.js 中$emit事件未被监听是开发中常见的问题之一。通过检查事件名称拼写、确保父组件正确监听事件、确保事件触发时机正确、清理事件监听器以及使用 Vue 3 的emits选项，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue.js 开发中更好地使用$emit，提升组件间通信的效率和可靠性。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作📚《Vue.js 3企业级项目开发实战（微课视频版》
Vue $emit()不触发方法的原因
青春不打烊的博客
04-20 2627
vue使用$emit时，父组件无法触发监听事件的原因是： $emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名
vue emit 触发事件不生效
weixin_39818813的博客
12-05 2406
很有可能是你接收事件写成接收属性了 如：这样是接收属性 <view class="nav-top"> <BtnNav :btnList="btnList" :changebtn="changebtn"></BtnNav> </view> 这样才是接收事件： <view class="nav-top"> <BtnNav :btnList="btnList" @changebtn="change
上班日记3——vue3爷，父，子在script setup下的defineEmits，事件命名等均无问题，但依旧不能触发爷组件方法
dlchgg的博客
08-19 803
3、使用nexTtick试试——都成习惯了，经常类似的问题都是如此，实际上emit通信因为nexttick而出问题感觉没有，但是不知道有没有特定情况。1、vue3也是这个新工作才接触，是不是我的defineEmits使用的有问题。1、子组件内使用defineEmits，父组件内设置handleBinduser方法，让子触发父。弊端嘛就是，太麻烦了，本来就是父和爷组件，现在还要多一个子触发父，而且公用的一个子组件，懒得写。2、可能需要驼峰命名。
vue组件递归后$emit传值失效的问题
Katto_Cara的博客
04-28 1146
今天在画一个知识点章节树形结构的页面用到了递归组件，但是遇到了一个问题，就是点击二级章节的时候（递归的二级章节）会出现。但是阻止冒泡了以后，想把点击拿到的数据传递给父组件的时候，发现this.$emit方法好像失效了。解决方法：给递归的子组件加上 v-on="$listeners"冒泡问题：vue可以用给click事件添加 .stop 阻止冒泡。事件, 点击一次，会把其一级章节也打印出来。
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）
weixin_44132285的博客
09-16 9025
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个） 分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。 出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到 解决问题的方法 1.可以点击的时候将值存储再vuex里面 点击的时候在父级页面获取到vuex里面存储的值 弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；
vue3 emit update不生效
u010539193的博客
03-20 1582
一开始以为的生效，根本没生效。界面有反应的原因是props.list的引用赋值给newList之后，newList调用push方法，实际是通过引用改变了父组件的值，根本不是通过emit传递的值。一开始，子组件的submitForm()在页面上是有效果的。所以一直困惑，为什么submitForm()里面的emit生效了，handleDelete()的emit不生效。:list前面要加v-model。总结，Vue3 的自定义props如果要使用数据双向传递，前面一定要规规矩矩的写v-model。
vue3 全局事件总线mitt，emit发布无效果
qq_43721254的博客
04-12 1032
很多刚开始接触vue3的朋友可能不太注意vue3的生命周期，需要注意vue3的setup只会执行一次，很可能把emit和on放在setup中一起执行，最后的结果只能是没有任何效果，最好就是放在onMounted中。
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element el-menu递归多层菜单$emit事件失效
周家大小姐
07-19 1245
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .
自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
小圣贤君的博客
09-22 2437
组件视图样式 当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的属性组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。 这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式： 递归组件说明 什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调
vue3中的emit()
最新发布
04-16
好的，我现在需要帮助用户解决关于Vue3中emit()方法的使用和问题。用户已经提供了一些相关的引用内容，我需要仔细分析这些信息，并结合之前的回答，给出一个结构清晰、内容详尽的解决方案。 首先，用户提到的引用[1...
wepy 父调用子组件方法_微信小程序wepy框架笔记小结
weixin_39753747的博客
12-22 384
该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE优势组件化开发小程序虽然有标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。wepy组件示例// index.wpyimport wepy from 'wepy';import List from '../component...
Ant Design Vue 中遇到的坑（一） this.$parent 等的失效问题
陈乾的博客
12-31 3540
一、发生场景 在使用Ant Design 时，因为需求更改，在原本的代码外层又套上了UI组件，导致了原本在子组件中使用父组件的属性和方法失效。this.$parent.xx is not a function … 例如使用了： <a-tabs> <a-tab-pane key="1"> <div /> </a-tab-pane> </a-tabs> 二、原因 在使用Ant Design 的UI组
Vue $emit()不能触发父组件方法，Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
m0_61672533的博客
01-03 1298
Vue子组件向父组件使用自定义事件$emit传递数据无效的坑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值