uni-app vue3环境下A navigateTo ->B ->C navigateBack ->B，B emit()给A的events事件不生效

uni-app vue3环境下A navigateTo ->B ->C navigateBack ->B，B emit()给A的events事件不生效

开发环境 版本号 项目创建方式
Windows Windows 10 专业版22H219045.5487 HBuilderX
HBuilderX 4.45

示例代码：

pageA 
```javascript
uni.navigateTo({  
    url: '/pages/B/B',  
    success: (res) => {  
        console.log('A向B发送数据')  
        res.eventChannel.emit('data', 'A给B的数据')  
    },  
    events: {  
        callback: (data) => {  
            console.log('A收到从B传回的数据', data)  
        }  
    }  
})
```javascript

```javascript
pageB 
```javascript
this.getOpenerEventChannel().emit('callback', 'B给A回传的数据')  
```javascript

## 操作步骤：

1. index页面 navigateTo   B页面
2. B页面 navigateTo C页面
3. C页面 navigateBack到B页面
4. B页面调用 this.getOpenerEventChannel().emit()  后  A页面就收不到 事件了

## 预期结果：

pageA 正常打印pageB echo 回传的数据

## 实际结果：

B发送了  A没有任何反应.
下面地址为复现代码。
[http://pan.vbin.top:1080/api/public/dl/jJPcuY1P/debug/bugtest.zip](http://pan.vbin.top:1080/api/public/dl/jJPcuY1P/debug/bugtest.zip)

## bug描述：

1. index页面 navigateTo   B页面
2. B页面 navigateTo C页面
3. C页面 navigateBack到B页面
4. B页面调用 this.getOpenerEventChannel().emit()  后  A页面就收不到 事件了  

VUE2环境下测试正常视频，
![vue2测试视频](http://pan.vbin.top:1080/api/public/dl/Rt9drY0H/debug/vue2.mp4)

VUE3环境下测试异常视频
![vue3测试视频](http://pan.vbin.top:1080/api/public/dl/yuE0eKPG/debug/Vue3.mp4)

更多关于uni-app vue3环境下A navigateTo ->B ->C navigateBack ->B，B emit()给A的events事件不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

补充链接http://pan.vbin.top:1080/share/WPeuEkBD

更多关于uni-app vue3环境下A navigateTo ->B ->C navigateBack ->B，B emit()给A的events事件不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个uni-app在Vue3环境下的已知问题。当页面经过navigateTo和navigateBack后，事件通道(eventChannel)会失效。这是由于Vue3的响应式机制与事件通道的交互方式导致的。

解决方法有以下几种：

  1. 使用全局状态管理(Vuex或Pinia)替代事件通道通信
  2. 在B页面返回时重新建立事件通道
  3. 使用uni.$emit和uni.$on进行全局事件通信

最简单的临时解决方案是在B页面返回时重新获取事件通道：

// B页面
onShow() {
  this.eventChannel = this.getOpenerEventChannel()
}
回到顶部