解决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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
js DOM的学习笔记
Dec 22 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
原生js实现表格翻页和跳转
Sep 29 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
ajax实现无刷新分页(php)
2010/07/18 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
设定php简写功能的方法
2019/11/28 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
服务标兵事迹材料
2014/05/04 职场文书
副总经理任命书
2014/06/05 职场文书
企业领导对照检查材料
2014/08/20 职场文书
财政局个人总结
2015/03/04 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL