当前位置: 首页 > news >正文

uniapp EventChannel 页面跳转参数事件传递navigateBack,navigateTo 成功后通知事件区别

问题:navigateBack()emit事件在onload()监听不到

 从A页面跳转到B页面,在B点击产生数据后,跳转回到A,并告诉A点击的数据是什么,使用:

navigateBack()。

(页面跳转流程: A->B ->A)

B页面:

  toPage() {uni.navigateBack({complete: (res) => {console.log(">>>com ", res)this.getOpenerEventChannel().emit('selecteCust', this.selectCustomer)},success: (res) => {console.log(">>>res", res)// res.eventChannel.emit('testCust', {data: this.selectCustomer})// 打开成功的话, 向打开的页面传递数据,传递的事件名:selecteCustthis.getOpenerEventChannel().emit('selecteCust', this.selectCustomer)}})},

A页面:

eventChannel.on无法监听到B传递过的事件: selecteCust

  onLoad() {// 监听事件this.ec = this.getOpenerEventChannel();console.log(">|--,,,,,,,,,,,eventchannel", this.ec)this.ec.on('testCust', (res) => {console.log("................selecteCust,监听到了", res)})},

官方文档

uni.navigateTo()

 

 uni.navigateBack()

 

分析:当前传递参数方式是下级给上级传递消息,使用navigiateBack()话,要在跳转之后再 

解决:

方式1:navigateBack()改成navigateTo()可以

 onLoad() {// 监听事件this.ec = this.getOpenerEventChannel();console.log(">|--,,,,,,,,,,,eventchannel", this.ec)this.ec.on('testCust', (res) => {console.log("................selecteCust,监听到了", res)this.customer = res.data})},

效果:

方式2: 

 A->B->A, A跳转地方添加监听event

 selectA() {uni.navigateTo({url: '/pages/custList',//   页面跳转回来事件监听events: {selecteCust: (data) => {console.log(">>选中的客户是", data)}})},

区分:uni.$on和eventChannel.on使用推荐

 

两者使用起来其实差不多,都可以达到父传子,子传父的作用。但是因为作用域的原因,evenetChannel在不同页面的变量可以重名,eventChannel更适合父传子,uni.$on适合子传父

官方文档:

uni.navigateTo(OBJECT) | uni-app官网

http://www.lryc.cn/news/189054.html

相关文章:

  • 【C++ Primer Plus学习记录】指针——使用delete释放内存
  • 2023 NOIP A层联测9 - 风信子 题解
  • 岩土工程安全监测无线振弦采集仪在无线组网的关键要点
  • 代码随想录Day14 LeetCodeT110平衡二叉树 T257二叉树的所有路径 T404 左叶子之和
  • C语言自定义类型_枚举联合(3)
  • asp.net网上销售系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio计算机毕业设计
  • 【Windows】RPC调用过程实例详解
  • 动手学强化学习第2章多臂老虎机
  • 钡铼BL124EC实现EtherCAT转Ethernet/IP的优势
  • 使用IntelliJ Idea必备的插件!
  • 代码随想录算法训练营第23期day19| 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树
  • 第四章 字符串part02 28. 实现strStr() 459. 重复的子字符串
  • 设计模式 - 状态模式
  • 【vim 学习系列文章 9 -- .vim 脚本文件开发学习】
  • NAT模式和桥接模式的区别
  • 应对出海安全合规挑战,兆珑科技为什么选择了亚马逊云科技?
  • Allegro基本规则设置指导书之Spacing规则设置
  • 使用【Blob、Base64】两种方式显示【文本、图片、视频】 使用 video 组件播放视频
  • 深度学习_1_基本语法
  • c#设计模式-行为型模式 之 中介者模式
  • 小程序uView2.X框架upload组件上传方法总结+避坑
  • 人脸检测及追踪回顾
  • 虚拟环境和包
  • springboot配置文件读取
  • 纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】
  • Linux下C++编程-进度条
  • C语言常见题目(1)交换两个变量的值,数的逆序输出,猜数游戏,两个数比较大小等
  • Springboot使用sqlcipher4加密sqlite数据库
  • 指针拔尖(2)(巩固提高,全网最牛,包会,看不懂带电脑来找我)
  • 本地部署多语言代码生成模型CodeGeeX2