[Vue warn]: Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“

文章讲述了在Vue开发中遇到兄弟组件间通信问题,尝试使用eventBus但遇到$emit错误。作者分析了可能的原因,包括命名、生命周期和事件监听顺序,并找到了解决方案,即利用$nextTick确保DOM更新后再执行$emit。通过调整代码,问题得到解决,强调了解决问题需要耐心和深入理解Vue的机制。
摘要由CSDN通过智能技术生成

项目场景:

vue实现兄弟进程间的通信。


问题描述

我想实现VUE中兄弟组件的通信,除了VueX之外,还可以使用eventBus,这几个教程把eventbus讲的很详细。

(34条消息) Vue 兄弟组件之间的通信_coffee豆丿的博客-CSDN博客_兄弟组件

大部分教程都是这样,我看了一个小时的教程。但是,我按照他们的代码去做的时候,就是会给我报标题的错。然后我搜索这个报错,网上的资料也没有很多。我记录一下。


原因分析:

很多博客分析了原因。

1、可能是命名的问题:【与我无关】

(34条消息) this.$emit方法无效的原因_来吧,相约98的博客-CSDN博客_this.$emit不生效
2、可能是因为生命周期的问题,然后说要把接收方的mounted改成created啥啥的,这个问题确实很关键,但是没解决我的。【烦死了,哈哈,毁灭吧,哈哈】

(34条消息) Vue中bus报错TypeError: Cannot read property ‘$emit‘ of undefined_盏茶作酒的博客-CSDN博客_cannot read property '$emit' of undefined

3、最后,也就是终极原因,考虑到VUE的事件监听机制。监听必须要在触发之前,也就是说$on的执行必须要在$emit之前。【听我说谢谢你】

(34条消息) vue bus.$emit触发第一次$on监听不到_microcosm1994的博客-CSDN博客_vue bus触发第一次,后续不触发

555555,我就为这么一个小问题,我解决了一个小时5555。


解决方案:

解决方案就是:反正我看不懂这话,懒得看了

用法:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

你只需要把emit函数的那一句变一变就好了。

this.$nextTick(function () {
        // DOM 现在更新了
        eventBus.$emit('msg',route)
      })

对,没错,就是这么简单。

对我自己想说的

我喜欢这样的自己。高冷冷在它的博客里说,任何事情都可以变的很简单,我们需要有耐心,然后为这件事情做足充分的准备。

努力coding,做一个对程序代码有耐心和好奇心的银。555

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值