zoukankan      html  css  js  c++  java
  • vue eventBus 跳坑的办法

    前言(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('事件')去解绑这个事件,亲测有效!

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

  • 相关阅读:
    Android
    十大基础有用算法之迪杰斯特拉算法、最小生成树和搜索算法
    【随想】android是个什么东西,andorid机制随想
    【Unity3D】【NGUI】Atlas的动态创建
    Java集合01----ArrayList的遍历方式及应用
    JAVA线程
    VC++的project文件
    selector的button选中处理问题
    单元測试和白盒測试相关总结
    leetCode(40):Path Sum
  • 原文地址:https://www.cnblogs.com/dujunfeng/p/8726104.html
Copyright © 2011-2022 走看看