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

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

  • 相关阅读:
    怎样理解 display:none 和 visibility:hidden
    怎样设置鼠标悬浮时弹出的文字提示框内容
    怎样获取当前元素节点的语言类型
    怎样控制元素节点的是否可拖动属性
    怎样读写分配给当前元素的快捷键
    怎样获取元素节点的标签名称
    怎样查看或修改元素节点的id属性
    怎样使用js将文本复制到系统粘贴板中
    怎样创建一个子树遍历器
    怎样创建一个子节点遍历器
  • 原文地址:https://www.cnblogs.com/dujunfeng/p/8726104.html
Copyright © 2011-2022 走看看