vue中eventbus的使用

eventbus的方法很是简单,我们需要做三步事情:
第一步,我们需要创造一个容器去充当我们的eventbus

第二步,我们需要去抛出,或者说提交我们的事件

第三步,我们去监听我们的那个事件(也许这才是第二部)

1、首先,我们需要在全局定义我们的eventbus

//设置bus来来传值
 window.bus=new Vue();

2、接着使用bus.$emit()抛出事件

beforeDestroy () {
 console.log(this.highlight, '这是今年的数据', this, '看看组件销毁之前会发生什么')
 bus.$emit('get', {
        item: this.item,
        date: this.date
      })
 },

3、bus.$on监听提交的事件

created () {
    //这里我将icon的list给保存下来了
    bus.$on('get', this.myhandle)
}
methods:{
     myhandle (val) {
      console.log(val, '这是从上个页面传递过来的参数')
    }
}

注:这个$on事件是不会自动清楚销毁的,需要我们手动来销毁
···
beforeDestroy () {
bus.$off('get', this.myhandle)
},
···
vue中eventbus被多次触发(vue中使用eventbus踩过的坑)
https://www.jianshu.com/p/fde85549e3b0

posted @ 2018-04-03 14:47  Sarah119  Views(663)  Comments(0Edit  收藏  举报