vue使用this.$root.eventHub和this.$bus

1.使用$bus

简单记录下

1.1前期准备

可以在和main.js同级的目录下新建一个bus.js文件，

import Vue from 'vue';
const Bus = new Vue()
export default Bus

然后在main.js中引入即可后续使用

import Bus from './bus.js'
Vue.prototype.$bus = Bus

1.2页面中使用

在你需要的地方将你要传的参(也可以不传调用子孙组件的方法也可以的)通过emit分发出去

this.$bus.$emit('companyData')
//这个分发应该是可以在任何的生命周期或则事件触发的方法中分发的

通过on来监听分发，建议在on之前off(取消监听)

this.$bus.$off('companyData')
this.$bus.$on('companyData',(data) =>{
//如果你传了的话，data为你传的参
//你的逻辑代码
})

2.this.$root.eventHub

2.1前期准备

直接在main.js中

new Vue({
    router,
    store,
    data: {
      eventHub: new Vue()  //这一行是关键
    },
    render: (h) => h(App),
  })

2.2页面中使用

使用方法和$bus一摸一样的，分发，监听，取消监听

  this.$root.eventHub.$emit('companyReport/init')


  this.$root.eventHub.$off('companyReport/init')
    this.$root.eventHub.$on('companyReport/init',() => {
      //业务代码
    })

2.3可以简化一下

在初始化Vue.app 之前 加上这样一句：

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

这样的话，既可以使用this.$root.eventHub也可以使用this.$eventHub了，eventBus也是一样的