解决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 相关文章推荐
js 金额文本框实现代码
Feb 14 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
js类的继承定义与用法分析
Jun 21 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
图片之间的切换
2006/06/26 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python教程之全局变量用法
2016/06/27 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
《三峡》教学反思
2014/03/01 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS