【uni-app】页面跳转传参

一、EventChannel 的核心作用

  1. 替代全局事件总线
    相比传统的 uni.$emit 和 uni.$on,EventChannel 无需手动移除监听(如 uni.$off),避免内存泄漏风险。
  2. 解决 URL 传参限制
    当需要传递大量数据时,URL 拼接参数可能超出长度限制,而 EventChannel 可通过事件通道直接传输复杂对象。
  3. 精准的页面间通信
    仅在跳转的源页面和目标页面之间建立通道,避免全局事件的污染。

二、核心方法与使用步骤

1. 发送方页面(发起跳转的页面)

通过 navigateTo 的 success 回调的 eventChannel 发送数据:

javascript 复制代码
  uni.navigateTo({
    url: '/pages/jobseeker/applications',
    // 传递userId作为参数
    success: (res) => {
      res.eventChannel.emit('userId', userInfo.value.id);
    }
  });
2. 接收方页面(被打开的页面)

通过 getOpenerEventChannel() 获取通道实例,监听事件并返回数据:

javascript 复制代码
onLoad(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const eventChannel = currentPage.getOpenerEventChannel();
  eventChannel.on('userId', (params) => {
    userId.value = params;
    // 其他代码...
  });
});

三、适用场景

  1. 数据回填
    例如从地址选择页返回选中地址到下单页。
  2. 跨页面实时交互
    如页面 A 跳转到页面 B 后,B 需要动态向 A 发送进度更新。
  3. 替代全局状态管理
    简单场景下可替代 Vuex,避免全局状态污染。
相关推荐
虎头金猫3 天前
4K 视频总卡在公网带宽?用 N1 + OpenList 把网盘播放链路重新理顺
运维·服务器·网络·python·容器·beautifulsoup·pandas
wuyk5553 天前
《WiFi 嵌入式物联网开发全套实战》| 第 16 章 ESP32 AP+STA 双模共存原理与工程坑点
网络·stm32·物联网
-梅3 天前
linux(8) 软硬链接
linux·运维·服务器
Wang's Blog3 天前
Java 项目实战: 外卖平台-文件下载与ServletOutputStream回写浏览器
服务器·项目开发
琥珀色糖3 天前
SimlpeHttp
linux·服务器
码兄科技3 天前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
第十人i3 天前
Linux 日志管理系统:journald 配置与优化
linux·服务器
QYRdata3 天前
年均增速24.2%!机器人数据湖未来六年增长动能强劲
网络·机器人·服务发现
CHENKONG_CK3 天前
破解制鞋打磨痛点:RFID赋能去毛刺工序自动化升级
网络·单片机·嵌入式硬件·网络协议·tcp/ip
2501_916007473 天前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview