vue eventbus(事件总线)的使用

楼主^#

更多发布于：2018-11-28 10:33

描述：听说事件总线在某些时候可以代替vuex使用，所以就去测试了一下，亲测之后我还是宁愿使用vuex，这个eventbus首次使用真的贼坑。
首先我测试的内容是A页面跳转到B页面，B页面返回到A页面带参数回来（我知道可以通过路由跳转带参数，缓存，vuex都行，在这里我只想用一下没用过的东西）。
A页面代码如下：

var _this=this;
EventBus.$on('showpanel2', function(data) {  
 _this.EventBusstate=data.showpanel2;
  })

beforeDestroy () {
     EventBus.$emit('showpanel2',{'showpanel2':false});
     EventBus.$off('showpanel2',{'showpanel2':false});
  },

B页面代码如下：

beforeDestroy () {
     EventBus.$emit('showpanel2',{'showpanel2':false});
     EventBus.$off('showpanel2',{'showpanel2':false});
  },

注意1：A页面里面EventBus.$on要么你用箭头函数，要么就要用var _this=this 两者选其一，不然this指向不对
注意2：A页面里面beforeDestroy()请写上，一定要销毁，不然输出值会每次累加。
注意3：B页面里面EventBus.$emit('showpanel2',{'showpanel2':false});一定要写在beforeDestroy()里面，不然输出值可能会累加。
上面所有注意项如果你都做了还可能出现值渲染不到页面上，首先请清除缓存，刷新页面(大坑),其次(这个是我自己数值渲染不到页面上做的一个很不好的操作，为什么说很不好呢，因为用了promise替代上面我说的A页面第一段代码以后我的值就能渲染到页面上了，但是返回去重新测试的时候，发现最开始的代码（上面我说的A页面第一段代码）也可以渲染到页面上，所以两种都记录下来。)

var _this=this;
    let p1 = new Promise((resolve, reject) =&gt; {
             EventBus.$on('showpanel2', function(data) {  
             resolve(data.showpanel2);
         })
   })
     Promise.all([p1]).then(function(results){
         _this.EventBusstate=results;
});

喜欢1

vue eventbus(事件总线)的使用

最新喜欢：