uniapp eventchannel的使用方法

在uniapp中如何使用eventChannel实现页面间通信？能否提供一个具体的使用示例，包括如何发送和接收事件？

2 回复

在uni-app中，EventChannel用于页面间通信。使用方法：

  1. 发送页面：uni.navigateTo时设置events监听事件，用eventChannel.emit发送数据。

  2. 接收页面：在onLoad中通过options.eventChannel接收并监听事件。

简单实用，适合页面间传值。


UniApp 中的 EventChannel 用于页面间通信，特别适用于跨页面传递数据和事件回调。以下是主要使用方法：

1. 发送数据到目标页面

在发送页面（如页面 A）使用 uni.navigateTo 的 events 选项和 success 回调：

// 页面 A
uni.navigateTo({
  url: '/pages/targetPage/targetPage',
  events: {
    // 定义事件监听（接收目标页面发来的数据）
    acceptData: (data) => {
      console.log('接收数据:', data);
    }
  },
  success: (res) => {
    // 通过 eventChannel 发送数据
    res.eventChannel.emit('sendData', { message: 'Hello from Page A!' });
  }
});

2. 接收数据并回调

在目标页面（如页面 B）的 onLoad 中获取 EventChannel：

// 页面 B
onLoad(options) {
  const eventChannel = this.getOpenerEventChannel();
  
  // 接收发送页面的数据
  eventChannel.on('sendData', (data) => {
    console.log('收到数据:', data); // { message: 'Hello from Page A!' }
  });

  // 向发送页面回传数据
  eventChannel.emit('acceptData', { feedback: 'Data received!' });
}

3. 关闭页面时通信

可在页面 B 关闭前发送数据：

// 页面 B
onUnload() {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('pageClosed', { status: 'closed' });
}

注意事项：

  • 仅支持通过 uni.navigateTo 跳转的页面间通信。
  • 事件名需保持一致，避免使用保留字。
  • 适用于单向或双向数据传递，如表单提交、状态回调等场景。

通过 EventChannel 可实现灵活解耦的页面通信，无需依赖全局状态管理。

回到顶部