$$emit与$ $on的用法

新建bus.js

import Vue from 'vue'
export const bus = new Vue()

引用bus.js

import {bus} from './bus'

bus.$on('test', function (msg) {
   console.log(msg)
})
    
bus.$emit('test', 11)

bus.$$emit触发第一次$ $on监听不到

因为$emit 先于 $on 执行了，VUE并没有储存监听事件，所以无法监听到数据。

我这里遇到的是在调用$emit的时候子组件并没有创建，所以无法监听到数据，子组件创建之后，便可以监听到传递过来的数据

我的解决方法是在调用$$emit的时候使用$ $nextTick()方法

用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        bus.$emit('test', 11)
      })
    }
  }
})

避免路由跳转多个组件重复监听，只需要在路由跳转之前移除当前组件监听事件即可：

beforeDestroy () {
    // 销毁监听事件
    this.$bus.$off('test')
  }