uniapp中eventchannel.emit的使用方法

在uniapp中，如何使用eventChannel.emit方法在不同页面间传递数据？我在父页面调用eventChannel.emit()后，子页面似乎没有接收到事件，求正确的使用方法和注意事项。能否提供完整的代码示例？

2 回复

在uniapp中，使用eventChannel.emit发送事件：

// 发送页面
uni.navigateTo({
  url: '/pages/target',
  events: {
    // 定义事件
    sendData: (data) => {
      console.log('接收返回数据:', data)
    }
  },
  success: (res) => {
    // 触发事件
    res.eventChannel.emit('receiveData', {msg: 'Hello'})
  }
})

// 接收页面
onLoad(options) {
  const eventChannel = this.getOpenerEventChannel()
  // 监听事件
  eventChannel.on('receiveData', (data) => {
    console.log(data.msg) // 输出：Hello
  })
}

主要用于页面间通信，通过事件传递数据。


在 UniApp 中，eventChannel.emit 用于通过事件通道（Event Channel）向目标页面发送数据，常用于页面间通信，例如从子页面向父页面传递信息。它通常与 uni.navigateTo 或其他页面跳转方法结合使用。

使用方法

  1. 发送数据：在源页面（如子页面）中，通过 getOpenerEventChannel() 获取事件通道，然后使用 emit 发送事件和数据。
  2. 接收数据：在目标页面（如父页面）中，通过 on 方法监听事件并处理数据。

代码示例

假设从子页面（PageB）向父页面（PageA）发送数据：

在父页面（PageA）中：

  • 使用 uni.navigateTo 跳转时，通过 events 选项定义事件监听器。
// PageA 跳转到 PageB
uni.navigateTo({
  url: '/pages/PageB',
  events: {
    // 监听自定义事件，例如 'sendData'
    sendData: (data) => {
      console.log('接收到数据:', data); // 处理从 PageB 发送的数据
    }
  }
});

在子页面（PageB）中：

  • 通过 getOpenerEventChannel() 获取事件通道，并使用 emit 发送事件和数据。
// PageB 发送数据回 PageA
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('sendData', {
  message: 'Hello from PageB!',
  value: 123
});
// 可选：发送后关闭当前页面
uni.navigateBack();

注意事项

  • 确保在页面跳转时设置了 events 选项，否则 emit 可能无效。
  • 事件名称（如 'sendData'）需在发送和接收端保持一致。
  • 事件通道仅适用于通过 uni.navigateTo 等跳转的页面间通信，不适用于全局事件。

通过这种方式，可以实现页面间的数据传递，例如表单提交后回传结果。如果有更多细节需求，请提供具体场景！

回到顶部