【uni-app】页面跳转传参

谢尔登2025-04-15 14:53

一、EventChannel 的核心作用

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

二、核心方法与使用步骤

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;
    // 其他代码...
  });
});

三、适用场景

数据回填
例如从地址选择页返回选中地址到下单页。
跨页面实时交互
如页面 A 跳转到页面 B 后，B 需要动态向 A 发送进度更新。
替代全局状态管理
简单场景下可替代 Vuex，避免全局状态污染。