码迷,mamicode.com
首页 > 其他好文 > 详细

vue eventBus 跳坑的办法

时间:2018-04-06 10:51:25      阅读:3340      评论:0      收藏:0      [点我收藏+]

标签:视图   bubuko   dem   tick   大神   log   png   col   技术   

前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺)

先上官方文档

技术分享图片

思路:

1.定义一个空的Vue实例,作为中央事件总线。

2.A组件定义方法去触发自定义事件

3.B组件在钩子里面去监听

 

OK!看似很简单,实践起来却贼鸡儿坑,一共遇到3个问题:

1.A组件触发的事件在B组件中可以console显示,但是不能更新视图。

2.A通过路由跳转至B,第一次是无法console出传递过来的数值的(第二次以后就可以)。

3.第二次传过来的数据依次是递增的。

 

我们来一个一个分析解决:

问题一最初判断是生命周期函数出了问题,经过分析发现是可以console出来应该是this指向的问题,最初写法:

 mounted () {
    Bus.$on(‘msg‘, function (data) {
      this.message = data   // this指向错误,该this指向Vue实例
    })
  }

于是分析,该this应该指当前事件,改为:

mounted () {
    Bus.$on(‘msg‘, (data) => {            //箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window
      this.message = data
    })
  }

改为箭头函数之后就解决了传递过去的数据不更新视图的问题了!

问题二:为什么第一次在A中触发事件,B中却没有打印呢?

请看图:技术分享图片技术分享图片

上图分别为B  A组件生命周期,我们可以明确的看到跳转至B组件的时候,A中的事件并没有触发,现在明白了吧,通过分析有两种解决方案:

1.使用this.$nextTick(在下次 DOM 更新循环结束之后执行延迟回调),也就是说,等B组件dom准备完成后在触发这个方法,亲测没问题!

2.在beforeDestroy钩子中去触发事件,亲测有效!

 

 

问题三:传递的数据为什么会递增呢?

是因为B中的事件一直存在,所以会导致每次都会监听上次触发的事件,解决办法:在B中beforeDestroy中使用Bus.$off(‘事件‘)去解绑这个事件,亲测有效!

 

 

各位大佬有更好的办法请留言!虚心指教

vue eventBus 跳坑的办法

标签:视图   bubuko   dem   tick   大神   log   png   col   技术   

原文地址:https://www.cnblogs.com/dujunfeng/p/8726104.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!