uniapp vue3中getOpenEventChannel如何使用

在uniapp的vue3项目中，使用getOpenEventChannel方法时遇到了问题。官方文档中提到的eventChannel对象获取方式不太明确，实际使用时发现无法正常触发事件通信。请问具体应该如何正确使用这个方法？能否提供一个完整的示例代码，包括页面跳转时传递eventChannel和接收事件的完整流程？

2 回复

在uniapp的Vue3中，getOpenEventChannel用于获取页面间通信的事件通道。用法如下：

  1. 发送页面：
const eventChannel = this.$scope.getOpenerEventChannel()
eventChannel.emit('eventName', data)
  1. 接收页面：
const eventChannel = this.$scope.getOpenerEventChannel()
eventChannel.on('eventName', (data) => {
  // 处理数据
})

注意：需在页面跳转时设置events选项才能使用。


在 UniApp Vue3 中，getOpenEventChannel() 用于获取页面间通信的事件通道，通常用于 页面跳转时传递数据，特别是从目标页面返回数据到原页面。

使用步骤

  1. 发送页面（原页面）

    • 使用 uni.navigateTo 跳转，并在 events 中定义监听事件
    • 通过 eventChannel.emit 发送数据（可选）

  2. 接收页面（目标页面）

    • 在 onLoad 中通过 getOpenerEventChannel() 获取事件通道
    • 使用 eventChannel.emit 返回数据

代码示例

发送页面

// pages/index/index.vue
uni.navigateTo({
  url: '/pages/detail/detail',
  events: {
    // 监听目标页面发送的事件
    acceptData: (data) => {
      console.log('接收到的数据:', data)
    }
  },
  success: (res) => {
    // 向目标页面发送数据（可选）
    res.eventChannel.emit('sendData', { message: '来自首页的数据' })
  }
})

接收页面

// pages/detail/detail.vue
import { onLoad } from '@dcloudio/uni-app'

onLoad((options) => {
  const eventChannel = this.getOpenerEventChannel()
  
  // 监听原页面发送的数据
  eventChannel.on('sendData', (data) => {
    console.log('收到原页面数据:', data)
  })
  
  // 返回数据给原页面
  const returnData = { result: '处理结果' }
  eventChannel.emit('acceptData', returnData)
})

注意事项

  • 仅适用于 uni.navigateTo 跳转的页面
  • 事件名需在双方约定一致
  • 目标页面关闭后，事件通道自动销毁
  • Vue3 中需通过 getOpenerEventChannel() 获取（注意方法名拼写）

这种方式适合需要双向通信的场景，比如选择城市后返回、表单填写后回传数据等。

回到顶部