1. 安装bus

npm install vue-bus

2. main.js引入bus

importVueBus from 'vue-bus';

Vue.use(VueBus)

3. 触发事件

 beforeDestroy () {

      this.$bus.emit('name',this.name)

    },

注意：当我们从A页面跳转到B页面中的时候发生了什么？首先是B组件created 然后beforeMounted接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed。然后B组件再执行mounted。 所以我们可以把A页面组件中的emit事件放到beforeDestory里，因为这个时候，B组件的created钩子已经执行，也就可以监听到从A传过来的事件了。而且从周期来看，B的$on监听，也不能放在mounted钩子里，不然也会出现监听不到的情况。

如下图生命周期：

2.png 1.png

4. 监听事件

  beforeMount () {

        let self = this

        this.$bus.on('name',function(res){

          self.msg = res

        })

      },

注意：beforeCreate,created,beforeMount 可以在这三个周期函数里监听。

5. 销毁事件

beforeDestroy () {

   this.$bus.off('name')

 }

注意：$on事件是不会自动销毁的。需要我们手动来销毁。