Vue中,在使用$emit和$on做页面间通讯时,刷新页面后报错$on is undefined

我等到花儿也谢了 发布于 01/07 10:00
阅读 705
收藏 0

Linux基金会开源软件大学开源技术公开课即将上线,Kubernetes1.19实战讲解!>>>

在第一次访问页面的时候,$emit 和$on 正常触发,页面正常加载,但是刷新一次当前页面后控制台报错,

Error in mounted hook: "TypeError: Cannot read property '$on' of undefined"。

此时切换到别的页面 再切回来后 又能正常加载数据,多次验证后发现 只有在本页面刷新后会报错。。。

我尝试过把$on的代码写在created(){ }中,问题并没能得到解决。

求大佬救救孩子吧

 

代码如下

 父页面代码

子页面代码

报错信息和报错位置

加载中
1
liuleidefeng
liuleidefeng

先说办法,将main.js中window.Listen=vm 放到 new Vue的created方法里,改后如下:

let vm=new Vue({
  el:'#app',
  router,
  components:{App},
  template:'<App/>',
  created() {
    window.Listen=this
  }
})

然后说原因

你把 window.Listen =vm 放在了 new Vue()的后面,可能你误以为会先执行 new Vue()并赋值给vm,然后接着执行window.Listen =vm,然后才去初始化页面所需要的组件,这个想法是错的!

真正的执行顺序是:new Vue()初始化的时候,会接着初始化当前访问路由所需要的所有组件,最后才会执行new Vue()后面的代码!不信你可以在关键位置加上console输出验证。

我等到花儿也谢了
我等到花儿也谢了
谢谢大神,问题完美解决:smile:
0
Kit_lee
Kit_lee

将window.Listen换成this ?

0
我等到花儿也谢了
我等到花儿也谢了

引用来自“Kit_lee”的评论

将window.Listen换成this ?

谢谢大佬  我刚刚试了下  还是刷新后不成功,这是我main.js里的

我等到花儿也谢了
我等到花儿也谢了
回复 @Kit_lee : 谢谢大神:sparkles:
Kit_lee
Kit_lee
四楼说对了
0
远方不远j
你的$on是因为有$emit才能映射到$on,你刷新的时候没有触发$emit,$on也就不存在
我等到花儿也谢了
我等到花儿也谢了
之前按照这个思路试了一下,我在$on的外层加了延迟500ms,让emit先执行,问题可以解决,非常感谢
0
kakai
kakai
为什么要父组件用emit派发事件,子组件on接收事件处理?你应该在父组件中使用子组件标签时使用ref属性,子组件methods中定义setRiverId(value),然后在父组件changeRiver中使用this.$refs.子组件.setRiverId()。按照我这种方法完全没必要使用事件,直接调用子组件的函数就行了。
我等到花儿也谢了
我等到花儿也谢了
谢谢大神 我再研究下您这种方式
返回顶部
顶部