vue中$emit触发的事件,$on 第一次监听不到数据,利用eventBus解决,并进行页面动态响应_喜欢 但不行的博客-程序员信息网_emitter.on vue拿不到数据

技术标签: html5  vue  vue.js  

组件与页面之间想通过$ emit,来触发一个事件,传递数据,可是当在目标页面利用$on监听事件,获取数据时,发现第一次并不能监听到事件,而返回再次点击就可以监听到数据。

原因在于$ emit 先于$ on 执行了,Vue并没有储存监听事件,所以无法监听到数据。

因为不想用vuex来解决,所以利用eventBus来解决,而且组件不直接通过$on来存储数据,而是利用bus实例来存储数据,然后组件只负责来获取数据。

首先在utils目录下(bus.js放置位置自己决定),新建bus.js 文件,内容如下:

import Vue from 'vue'
export const bus = new Vue({
    
  data () {
    
    return {
    
      // 定义数据
      data: {
    }
    }
  },
  created () {
    
    // 绑定监听
    this.$on('toDetailPage', (value)=>{
    
      this.data = value.data
    })
  }
})

在发送数据的组件里先引用

import {
    bus} from "../../utils/bus.js"

在跳转方法中,触发$ emit事件

skip_to_detail: function (e) {
    
      //跳转到详情页面
        var that = this;
		bus.$emit('toDetailPage', {
    
	             data: {
    
	             userName: that.userName,
	             commodityId: that.commodityId,
	             ...
	             ...
	             commodityDescription: that.commodityDescription,
	           },
	           })
  
            uni.navigateTo({
    
            	url: "../../detailPage",
            })
    }

在目标页面中也是先引用bus.js文件

import {
    bus} from "../../../utils/bus.js"

通过computed计算属性,来接受数据,动态响应刷新页面

computed:{
      
  	userName(){
    
		return bus.data.userName
	},
  	commodityId(){
    
		return bus.data.commodityId
	},
  	...
  	...
  	commodityDescription(){
    
		return bus.data.commodityDescription
	}
  },
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36490598/article/details/104684868

智能推荐

python爬虫需求分析-Python爬虫实战之(二)| 寻找你的招聘信息_weixin_37988176的博客-程序员信息网

作者:xiaoyu微信公众号:Python数据科学知乎:Python数据分析师最近总被智联招聘广发骚扰,烦死个人了简直。索性点进去看了看爬虫工程师现在市场需求到底怎么样了?发展前景如何?看完了之后感觉目前还不错,根据北京来看职位需求还是蛮多的,薪资也还行,于是就对智联招聘职位信息的爬取发起了一次小小的挑战,今天给大家分享一个爬取招聘网站的工作信息,效果图如下(部分截图)。(更多效果图在后面)功能需...

qt undefined reference to `[email protected]_斗转星移3的博客-程序员信息网

文章参考自:https://blog.csdn.net/hebbely/article/details/69946155这是openGL相关库文件没有链接,在.pro文件中加入 openGL相关库即可:win32:LIBS += -lOpengl32 \ -lglu32 \ -lglut...

2021 国内外 IoT 物联网平台汇总_IoT物联网技术的博客-程序员信息网

物联网是继互联网、移动互联网之后的又一个万亿级的大市场。物联网平台作为物联网应用的基础设施,既管理设备、处理数据,又连接用户,必然是各路云厂商的兵家必争之地。今天小编就为大家梳理了国内外主...

Windows下用PowerShell启动Python_机器学习者的博客-程序员信息网

下载Atom官网 https://atom.io下载但是网站打开和下载都很慢 就像ros国外源一样Atom在GitHub上开源 https://github.com/atom虽然打开GitHub也很慢 但不知为何用联通的网快到媲美打开百度的速度 下载也是安装Python3.8.1同样使用联通网打开官网下载会快很多安装时勾选Add Python3.8 to PATH这样pyth...

前端性能测试工具Lighthouse_smooth-z的博客-程序员信息网_accessibility lighthouse

在前端开发中,对于自己开发的app或者web page性能的好坏,一直是让前端开发很在意的话题。我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,我自己尝试了一款工具:Lighthouse,感觉还不错,记录下来,也顺便分享给用得着的伙伴。Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验...

昆明冶金三校生计算机专业,昆明冶金高等专科学校单招专业_凿船尸爷的博客-程序员信息网

昆明冶金高等专科学校单招专业名单:黑色冶金技术、金属压力加工、炭素加工技术、金属材料与热处理技术、金属与非金属矿开采技术、矿物加工技术、物流管理、给排水工程技术、数控技术、材料成型与控制技术、工程机械运用技术、材料工程技术、建筑材料工程技术、建筑材料检测技术、化工生物技术、应用化工技术、物联网应用技术、计算机网络技术、应用越南语、应用泰语、应用外语(老挝语方向)、宝玉石鉴定与加工、通信技术、机电一...

随便推点

u3d修改服务器ip,Unity ping一个服务器 ip 的工具类_我努力变强的博客-程序员信息网

using UnityEngine;using System.Collections;public class UnityPing : MonoBehaviour{private static string s_ip = "";private static System.Action s_callback = null;private static UnityPing s_unityPing = ...

linux系统安全配置规范_yunweigege的博客-程序员信息网

2安装2.1使系统处于单独(或隔离)的网络中。以防止未受保护的系统连接到其它网络或互联网中受到可能的攻击安装完成后将下面软件卸载pump                                    apmd                                   lsapnptools                  

破解 京东登录滑块验证_春景未央宫的博客-程序员信息网

第一次使用会有进度条加载,直接可运行直接上源码import asyncioimport randomimport cv2from pyppeteer import launchfrom urllib import request滑块的缺口距离识别async def get_distance():img = cv2.imread(‘image.png’, 0)template = cv2.imread(‘template.png’, 0)res = cv2.matchTemplate(i

使用ffmpeg工具进行YUV420P到RGB32的格式转换问题总结_AnApplePie的博客-程序员信息网_yuv420p转rgb32

最近学习ffmpeg相关知识,参照雷神的博客,完成YUV420P到RGB32格式的转换,具体的步骤就不说了,可以参照雷神的博客,但是在整个工程的配置以及运行过程中遇到了很多问题,下面一一总结:开发环境:32位 Windows7操作系统、VS20121.fatal error C1004: 发现意外的文件尾。解决方法:加入代码#define __STDC_CONSTANT_MACROS。2.ffmp...

Java容器使用总结_楚兴的博客-程序员信息网

Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack ├Queue│├Deque│└LinkedList└Set   ├SortedSet   ├TreeSet  └HashSetMap ├Hashtable ├HashMap

推荐文章

热门文章

相关标签