解决vue bus.$emit触发第一次$on监听不到问题


Posted in Javascript onJuly 28, 2020

$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监听不到问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
javascript检测两个数组是否相似
May 19 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
bootstrap table实例详解
Jan 06 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
vue实现虚拟列表功能的代码
Jul 28 #Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 #Javascript
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 #Javascript
You might like
PHP中的串行化变量和序列化对象
2006/09/05 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
JS查看对象功能代码
2008/04/25 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
python requests 测试代理ip是否生效
2018/07/25 Python
python实现月食效果实例代码
2019/06/18 Python
详解Python time库的使用
2019/10/10 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
表彰大会主持词
2014/03/26 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
励志演讲稿300字
2014/08/21 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
义诊活动总结
2015/02/04 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python