bus.$emit触发第一次emit触发第一次emit触发第一次 $on监听不到
因为$emit 先于 $on 执行了,VUE并没有储存监听事件,所以无法监听到数据。

我遇到的是页面跳转created时还没创建$on,调用$emit的时候无法监听到数据,子组件创建之后,便可以监听到传递过来的数据

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
   // …
   methods: {
     // …
     example: function () {
       // DOM 还没有更新
       this.$nextTick(function () {
         // DOM 现在更新了
         bus.$emit('test', 11)
       })
     }
   }
 })

避免路由跳转多个组件重复监听,只需要在路由跳转之前移除当前组件监听事件即可:
beforeDestroy () {
// 销毁监听事件
this.$bus.$off('test')
}