【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,避免全局状态污染。
相关推荐
波波0076 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
記億揺晃着的那天7 小时前
NAS 内网域名访问为什么需要浏览器授权
网络·nginx·js·nas
chunmiao30327 小时前
DeepSeek V4-Pro 正式版上线,API 8月17日起分时调价
网络·安全
隔窗听雨眠8 小时前
GBase 8s并发控制深度解析:封锁机制、隔离级别与死锁处理全攻略
服务器·数据库·oracle
鲸采云SRM采购管理系统9 小时前
采购管理系统哪家好?2026最新测评对比
java·服务器·数据库
迪康Defender10 小时前
AI 重构终端安全运营:智能分析中枢 AI Insight 模块架构与落地场景深度解析
运维·网络·人工智能·其他·安全·重构·架构
那年窗外下的雪.10 小时前
AIDC 学习日志 第 04 天 BGP Underlay 基础与路由选择
服务器·学习·php
0x5310 小时前
Java网络编程(二)
java·服务器·网络
果果燕11 小时前
C++学习笔记(三):类与对象拓展学习笔记
java·服务器·前端
小绫网络安全12 小时前
Kali Linux渗透测试入门教程:从零搭建到实战攻防
linux·运维·服务器