【uni-app】页面跳转传参

一、EventChannel 的核心作用

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

---

二、核心方法与使用步骤

1. 发送方页面（发起跳转的页面）

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

  uni.navigateTo({
    url: '/pages/jobseeker/applications',
    // 传递userId作为参数
    success: (res) => {
      res.eventChannel.emit('userId', userInfo.value.id);
    }
  });

2. 接收方页面（被打开的页面）

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

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，避免全局状态污染。

原文地址：https://blog.csdn.net/XiugongHao/article/details/147223236

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！