解决vue bus.$emit触发第一次$on监听不到问题
更新时间：2020年07月28日 10:59:58 作者：microcosm1994
这篇文章主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
$emit与emit与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触发第一次emit触发第一次emit触发第一次 $on监听不到
因为$emit 先于 $on 执行了，VUE并没有储存监听事件，所以无法监听到数据。
我这里遇到的是在调用$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')
}
补充知识：组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件
this.$bus是全局变量
a、b是两个父组件，c是子组件。
c页面触发事件：
this.$bus.$emit(event)
a、b页面监听c组件的事件
pagea:
this.$bus.$on(event, () => {
this.status = 'reserve'
})
pageb:
this.$bus.$on(event, () => {
this.status = 'buying'
})
如果在调用了a页面之后，再调用b页面，回导致this.status是reserve而不是我们想要的buying。
正确写法：
pagea:
this.$bus.$off(event).$on(event, () => {
this.status = 'reserve'
})
pageb:
this.$bus.$off(event).$on(event, () => {
this.status = 'buying'
})
以上这篇解决vue bus.$emit触发第一次$on监听不到问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue的props父传子的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了5分钟学会Vue动画效果(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要给大家介绍了如何使用 Vue3 实现一个穿梭框效果,当选中数据,并且点击相对应的方向箭头时,选中的数据会发送到对面,并且数据会保持正确的顺序进行排列,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
在Vue3中,公共组件的main.js文件扮演着非常重要的角色,它的作用主要体现在：注册全局组件、引入公共样式、引入Vue、引入组件、创建Vue实例、挂载实例,本文将围绕Vue3公共组件的main.js文件进行详细的阐述,包括其作用、常用代码等方面2023-08-08
这篇文章主要介绍了Element InputNumber 计数器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本篇文章主要介绍了详解VUE2.X过滤器的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue项目打包部署到服务器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论