【uni-app】页面跳转传参

一、EventChannel 的核心作用

  1. 替代全局事件总线
    相比传统的 uni.$emituni.$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,避免全局状态污染。
相关推荐
晏宁科技YaningAI13 小时前
VoIP系统的工程实现模型:从信令控制到媒体传输的完整架构解析
网络·人工智能·架构·系统架构·信息与通信
HLC++13 小时前
Linux的进程间通信
android·linux·服务器
白露与泡影15 小时前
Arthas 实战指南:从方法耗时定位到 JVM 变量热修改
服务器·jvm·c#
神奇霸王龙16 小时前
Claude Code屠榜:MiMo与Grok紧追Codex
服务器·网络·人工智能·gpt·ai·ai编程
Web极客码16 小时前
WordPress SEO优化:提升网站排名的13个关键步骤
服务器·seo·wordpress
数智化管理手记18 小时前
账龄分析手工统计易遗漏?自动账龄分析工具怎么搭建
大数据·网络·数据库·人工智能·数据挖掘
LabVIEW开发18 小时前
NI Package Manager安装LabVIEW时InternalServerError错误
网络·数据库·labview·labview知识·labview功能·labview程序
RD_daoyi18 小时前
外链权重暴跌至13%,品牌提及反超传统链接——2026年不做Digital PR,你的独立站等于隐形
运维·网络·学习·机器学习·搜索引擎
张小姐的猫19 小时前
【Linux】网络编程 —— HTTP协议(上)
linux·运维·服务器·网络·http·单例模式·策略模式
国科安芯19 小时前
星间光链路:AS32S601型抗辐射MCU在空间激光通信终端控制中的技术实现
服务器·网络·单片机·嵌入式硬件·物联网·安全·信息与通信