bus.$emit触发第一次emit触发第一次emit触发第一次 $on监听不到
因为$emit 先于 $on 执行了,VUE并没有储存监听事件,所以无法监听到数据。
我遇到的是页面跳转created时还没创建$on,调用$emit的时候无法监听到数据,子组件创建之后,便可以监听到传递过来的数据
解决方法是在调用$emit的时候使用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')
}