uniapp中res.eventchannel的使用方法

在uniapp中如何使用res.eventChannel进行页面间通信？我在父子页面或跨级页面传值时遇到问题，eventChannel的emit和on方法具体应该如何配合使用？能否提供一个完整的使用示例，包括发送和接收数据的代码片段？另外，eventChannel在页面关闭后是否会自动销毁，是否需要手动清理监听事件？

2 回复

在uniapp中，使用res.eventChannel进行页面间通信。在跳转时通过events定义事件，目标页面通过getOpenerEventChannel()接收并监听事件，使用emit触发，on监听。


在 UniApp 中，res.eventChannel 用于实现页面间通信，特别是在使用 uni.navigateTo 等路由方法时传递事件数据。它允许两个页面（如父页面和子页面）通过事件通道进行双向通信。

基本使用方法

  1. 发送页面（父页面）：

    • 在 uni.navigateTo 的 success 回调中，通过 res.eventChannel 获取事件通道对象。
    • 使用 emit 方法向目标页面发送事件。
    • 示例代码：
      uni.navigateTo({
  url: '/pages/targetPage/targetPage',
  events: {
    // 定义事件监听器，用于接收从目标页面发送的事件（可选）
    acceptData: (data) => {
      console.log('接收数据:', data);
    }
  },
  success: (res) => {
    // 通过事件通道发送数据到目标页面
    res.eventChannel.emit('sendData', { message: 'Hello from parent!' });
  }
});

  2. 接收页面（子页面）：

    • 在 onLoad 生命周期中，通过 this.getOpenerEventChannel() 获取事件通道。
    • 使用 on 方法监听父页面发送的事件。
    • 示例代码：
      export default {
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听父页面发送的 'sendData' 事件
    eventChannel.on('sendData', (data) => {
      console.log('接收父页面数据:', data);
    });
  }
}

  3. 双向通信：

    • 子页面也可以通过事件通道向父页面发送事件。
    • 示例代码（在子页面中）：
      const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptData', { response: 'Hello back!' });

注意事项

  • 事件通道仅在使用 uni.navigateTo、uni.redirectTo 等路由方法时可用。
  • 确保事件名称一致（例如 'sendData'），否则无法正确监听。
  • 适用于简单的数据传递，复杂场景建议使用 Vuex 或全局事件总线。

通过以上步骤，你可以轻松实现 UniApp 页面间的事件通信。

回到顶部