uni-app eventChannel页面级监听事件只能执行一次

示例代码：

A页：  
点击按钮，进到B页，并在过多成后发射事件  
uni.navigateTo({  
            url:B,  
            success: res => {  
                res.eventChannel.emit('shoowdata', { data: 'data from starter page' })  
            },fail: () => {},complete: () => {}  
        })  

B页  
onLoad(){  
let that=this;  
            const eventChannel = this.getOpenerEventChannel();  
             eventChannel.on("shoowdata", function(res) {  
                 console.log(res,222)  
调试发现，刷新页后，第一次进到B页正常输出此处res内容，返回A页，再点击按钮从A页进到B页时，此处调试为空，无内容了，只有第一次打开，监听事件会生效！  
             })  
}

A页在主包中，B页在分包中

操作步骤：

使用uni.navigateTo从A页跳转到B页，并在成功后发射页面级事件
在B页监听页面级事件，第1次正常能监听到
从B页点导航按钮返回至A页，再从A页再点击打开进入B页，此时页面级监听事件无效，切换到了VUE2，发现也是这个问题。

预期结果：

页面级监听事件每次打开都能生效

实际结果：

页面级监听事件，仅第一次生效，之后不再生效。

bug描述：

使用eventChannel.on，监听uni.navigateTo的res.eventChannel.emit事件
只能生效一次！
下次再打开页面，监听事件不执行了。


| 开发环境         | 版本号    | 项目创建方式   |
|------------------|-----------|----------------|
| Windows          | win11     | HBuilderX      |
| HBuilderX        | Alpha     |                |
|                  | 3.4.12    |                |

nodeper 1楼•9 天前

注：B页是在分包中。A页在主包中。

yibo5220 2楼•9 天前

查看相关问题：https://ask.dcloud.net.cn/question/131937

bupafengyu 3楼•9 天前

放假回来没都，啥时候能修复啊。这个基础功能急用啊。

eggper 4楼•9 天前

这个是不是因为vue3不支持on监听了，所以页面级事件的ON监听也不能用了？

ionicwang 5楼•9 天前

在 uni-app 中，eventChannel 是用于页面间通信的一种机制。通常情况下，eventChannel 的事件监听器是可以多次触发的，但如果你发现事件监听器只能执行一次，可能是由于以下原因：

1. 事件监听器被移除

如果你在事件监听器中手动移除了监听器（例如使用 off 方法），那么事件监听器将只会执行一次。

eventChannel.on('eventName', function(data) {
    console.log('Event received:', data);
    // 移除监听器
    eventChannel.off('eventName');
});

2. 页面被销毁

如果页面被销毁（例如通过 uni.navigateBack 返回上一页），那么该页面上的所有事件监听器也会被移除，导致事件监听器只能执行一次。

3. 事件只触发了一次

确保你在发送事件的页面中多次触发了事件。如果事件只触发了一次，那么监听器自然只会执行一次。

// 发送事件的页面
eventChannel.emit('eventName', { message: 'Hello' });
eventChannel.emit('eventName', { message: 'World' });

4. 事件监听器未正确绑定

确保你在接收事件的页面中正确绑定了事件监听器。如果事件监听器未正确绑定，可能会导致事件无法被多次触发。

// 接收事件的页面
onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('eventName', function(data) {
        console.log('Event received:', data);
    });
}

5. 使用 `once` 方法

如果你使用了 once 方法，事件监听器只会执行一次。

eventChannel.once('eventName', function(data) {
    console.log('Event received:', data);
});

解决方案

如果你希望事件监听器可以多次触发，确保以下几点：

不要使用 once 方法。
不要在事件监听器中移除监听器。
确保事件在发送页面中多次触发。
确保事件监听器在接收页面中正确绑定。

// 发送事件的页面
eventChannel.emit('eventName', { message: 'Hello' });
eventChannel.emit('eventName', { message: 'World' });

// 接收事件的页面
onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('eventName', function(data) {
        console.log('Event received:', data);
    });
}