vue中$emit触发的事件,$on 第一次监听不到数据,利用eventBus解决,并进行页面动态响应_this.$nuxt $emit后的数据没有监听到-程序员宅基地

技术标签: 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换行-程序员宅基地

文章浏览阅读6.8k次,点赞2次,收藏4次。我们学习Python必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有阿里大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。当我学到一定基础,有自己的理解能力的时候,会去阅读一些前辈整理的书籍或者手写的笔记资料,这些笔记详细记载了他们对一些技术点的理解,这些理解是比较独到,可以学到不一样的思路。Python所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。_python换行

最小凸包算法-程序员宅基地

文章浏览阅读608次。使用Graham扫描法进新解决最小凸包问题先找到最左下端点然后根据极角来进行逆时针排序在根据相对极角增减来去除不需要的点C++代码 1 #include<iostream> 2 #include<cstdio> 3 #include<cstring> 4 #include<algorithm> 5..._echarts 凸包算法

mac安装python第三方库无法使用~_mac pycharm pypdf2库 运行0%-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏6次。今天终于把接口自动化框架的方法封装成包,可以使用pip命令进行安装啦,灰常开心~but安装成功后发现无法使用~想哭经过各种查阅才发现原因有两点,使用pip命令安装的版本不对。pip安装地目录和项目里的第三方库路径不一致导致。首先针对第一点先排查电脑安装了几个python?mac自带python2,而你又安装了python3,那么使用pip 安装第三方库,默认安装到python2下~所以:只有一个python,直接使用pip安装没问题,但是如果既有python2又有python3,而你_mac pycharm pypdf2库 运行0%

postman本地测试接口的地址路径,如何获取和拼接_postman的地址怎么查-程序员宅基地

文章浏览阅读1.7w次,点赞14次,收藏48次。首先,在本地进行接口自测,那么就是本地的ip,既:http://localhost,其他就是其他的ip地址。接着是端口号以及所添加的共用路径,我们可以从springboot项目的配置文件application.yml获取,找到server: # 服务器的HTTP端口,默认为8081 port: 8202 servlet: # 应用的访问路径 context-path: /avrs这里的port就是端口号,context-path则是共用路径,此时的路径就拼接._postman的地址怎么查

解决 vscode GitLens 无法使用问题_gitlens requires git to be enabled. please re-enab-程序员宅基地

文章浏览阅读1.1w次,点赞2次,收藏2次。问题复现最近在项目中,vscode 的 GitLens 突然失效,并在选项卡中显示 No source control providers registered. 如下图:解决方案按照这里的步骤,可以顺利解决此问题在 File -> Perferences -> Settings 中搜索 git.path 编辑 settings.json,加上如下配置{ "git...._gitlens requires git to be enabled. please re-enable git — set `git.enabled

0-1背包问题(动态规划入门)_mc算法解背包问题-程序员宅基地

文章浏览阅读499次。九讲背包问题题目有N件物品和一个容量为V的背包。第i件物品的费用是c[i],价值是w[i]。求解将哪些物品装入背包可使价值总和最大。基本思路这是最基础的背包问题,特点是:每种物品仅有一件,可以选择放或不放。用子问题定义状态:即f[i][v]表示前i件物品恰放入一个容量为v的背包可以获得的最大价值。则其状态转移方程便是:f[i][v]=max{f[i-_mc算法解背包问题

随便推点

day48:54. 二叉搜索树的第k大节点(递归)_给一个二叉查找树(bst),找出第 k 大的值,递归讲解-程序员宅基地

文章浏览阅读201次。问题描述:给定一棵二叉搜索树,请找出其中第k大的节点。使用递归,这里是求解第k大的节点 所以可以将中序遍历倒过来进行,中序遍历先遍历左子树,根节点,右子树,现在先遍历右子树,根节点,左子树,这样就可以倒着找第k大的节点。如果找到该节点立马返回,不用再遍历左子树了,节省时间。class Solution {public: int ans; int kthLargest(TreeNode* root, int k) { dfs(root,k); retur_给一个二叉查找树(bst),找出第 k 大的值,递归讲解

如何在AIX 4.3中安装联机手册?_aix联机-程序员宅基地

文章浏览阅读888次。使用联机手册之前,需安装相应的软件包。 解答 AIX 4.3 安装介质包含两张联机文档光盘(Documentation CD): Base Documentation CD 和 Extended Documentation CD。使用命令man查看系统命令之前 需要按照下列步骤安装相应的软件包: a. 正确设置环境变量LANG的值,如“en_US”为英文环境,“zh_CN”为简体中文环境。可以用_aix联机

linux卸载、离线安装docker,安装Portainer工具_trying to pull repository docker.io/library/mysql -程序员宅基地

文章浏览阅读1.3k次,点赞18次,收藏21次。"进行安装,但是我执行之后docker安装失败(这里错误信息忘复制了,大概就是找不到docker-c),然后决定直接从docker源下载docker文件放到服务器中启动。查询是因为docker版本太旧不匹配导致安装失败,"yum install docker"安装的是13.*版的docker,然后需执行"yum install -y docker-ce。原计划通过yum安装但是执行"yum install docker" 安装docker成功之后,使用docker安装mysql5.7提示以下错误。_trying to pull repository docker.io/library/mysql ... missing signature key

【TensorRT系列笔记-01】TensorRT 5.0.2.6 安装-程序员宅基地

文章浏览阅读1.7k次。官方下载地址:https://developer.nvidia.com/nvidia-tensorrt-5x-download选择对应版本,根据你的OS以及CUDA选择对应的版本,如下图所示:对下载好的文件进行更名,并解压;tar -xzvf TensorRT-5.0.2.6.tar.gz配置环境变量:vim ~/.bashrc添加环境变量:exp..._tensorrt 5.0.2

B/S结构简介及与C/S结构的区别-程序员宅基地

文章浏览阅读81次。B/S结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户界面完全通过WWW浏览器实现,一部分事务逻辑在前端实现,但是主要事务逻辑在服务器端实现,形成所谓3-tier结构。B/S结构,主要是利用了不断成熟的WWW浏览器技术,结合浏览器的多种Script语言(VBScript、JavaScript…)和..._b/s结构

逻辑运算符和逻辑表达式(逻辑或、逻辑与、逻辑非)-程序员宅基地

文章浏览阅读5.8k次。逻辑与或非,逻辑运算符的优先级_逻辑表达式

推荐文章

热门文章

相关标签