Vue中bus报错TypeError: Cannot read property ‘$emit‘ of undefined

我们发现，在A销毁之前，B组件的beforeCreate ，created，和beforeMount这三个钩子函数先触发，之后才是A组件的销毁钩子的触发，因为总线Bus要求要先有监听再触发，才能成功监听，所以我们只能在A组件的beforeDestroy或者destroyed这两个生命周期钩子中触发函数$emit，同理也只能在B组中的beforeCreate ，created，和beforeMount这三个钩子函数中监听$on。

//tabhome （A）组件中在beforeDestroy中触发
beforeDestroy () {
    console.log('A before destroy')
    window.EventBus.$emit('getData', this.msg)
  }
//在TabPosts中的created中监听
created () {
    console.log('%c%s',
      'background: yellow;',
      'B created')
      console.log(1)
    window.EventBus.$on('getData', (msg) => this.getData(msg))
  }

这样我们想要的功能就实现了，实际动手做的细心的同学会发现：还是有之前重复触发的问题，还是会随着切换次数的增加而使监听函数触发的次数增加，解决这个问题就简单了。在我们用总线传值的时候要记得关闭监听，在B组件中的destroyed钩子中增加EventBus.$off方法即可，至此就没问题了。

//TabPosts组件 //关键点
 destroyed () {
    console.log('%c%s',
      'background: yellow;',
      'B beforecreate！')
    window.EventBus.$off('getData')
  }