解决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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
详解jQuery中的事件
Dec 14 Javascript
js返回顶部实例分享
Dec 21 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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下获取客户端ip地址的函数
2010/03/15 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python处理大日志文件
2019/07/23 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
django框架forms组件用法实例详解
2019/12/10 Python
浅析Python 条件控制语句
2020/07/15 Python
请介绍一下WSDL的文档结构
2013/03/17 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
社会保险接收函
2014/01/12 职场文书
创业资金计划书
2014/02/06 职场文书
英语老师推荐信
2014/02/26 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
社会实践活动总结
2015/02/05 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
python运行脚本文件的三种方法实例
2022/06/25 Python