【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,避免全局状态污染。
相关推荐
贞明电子2 小时前
工业三色报警灯怎么接入项目系统?开关量与RS485控制应用指南
运维·网络·微信公众平台·贞明电子
HideF2 小时前
Linux
linux·服务器·网络
万联WANFLOW2 小时前
海外网络故障怎么排查?Cloudflare 三季度断网报告解读与 mtr 实战
运维·网络·故障分析
sbjdhjd2 小时前
网工进阶笔记:H3CSE 园区网全栈技术与协议汇总
网络·笔记·云计算·ssh·网络工程·vlan·aaa
Ruiery4 小时前
Linux 6.6内核内存管理深度解析(十三):slab/slub 分配器
linux·运维·服务器
taktok_ai4 小时前
用 cc-switch 连接 Taktok
网络
乌恩大侠5 小时前
从 AI-RAN 到 AI Agent:基于 NVIDIA Nemotron 构建 5G/6G 智能网络故障诊断系统
服务器·人工智能·5g·o-ru·ai-ran·电信大模型
小嘉丶学长7 小时前
Day14 · 字典与集合
java·开发语言·网络·python·学习·1024程序员节
迪菲赫尔曼7 小时前
【基础篇 11】把官方源码放到服务器:版本、解压层级和安装位置,一次弄清楚
运维·服务器·开发语言·人工智能·python·yolo·目标检测
by209998 小时前
Linux GCC/G++ 编译与 Makefile 构建
linux·运维·服务器·经验分享