3***@qq.com
3***@qq.com
  • 发布:2021-10-05 18:12
  • 更新:2022-10-09 11:38
  • 阅读:2353

【报Bug】通过eventChannel向被打开页面传送数据 , 在vue3中只有第一次页面跳转会执行, 在vue2中正常跳转则执行

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: Alpha

HBuilderX版本号: 3.2.6

浏览器平台: Chrome

浏览器版本: 92.0.4515.159

项目创建方式: HBuilderX

示例代码:
index页面
<template>  
    <view>  
        index页面  
        <button type="default" @click="goto">goto</button>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            goto() {  
                uni.navigateTo({  
                    url: '../test/test',  
                    events: {  
                        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据  
                        someEvent: function(data) {  
                            console.log(data)  
                        }  
                    },  
                    success: (res) => {  
                        // 通过eventChannel向被打开页面传送数据  
                        res.eventChannel.emit('acceptDataFromOpenerPage', {  
                            data: 'acceptDataFromOpenerPage触发'  
                        })  
                    }  
                })  
            }  
        }  
    }  
</script>
test页面
<template>  
    <view>  
        test页面  
    </view>  
</template>  

<script>  
    export default {  
        onLoad(option) {  
            // #ifdef APP-NVUE  
            const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE  
            // #endif  
            // #ifndef APP-NVUE  
            const eventChannel = this.getOpenerEventChannel();  
            // #endif  
            eventChannel.emit('someEvent', {  
                data: 'someEvent触发'  
            });  
            // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据  
            eventChannel.on('acceptDataFromOpenerPage', function(data) {  
                console.log(data)  
            })  
        }  
    }  
</script>

操作步骤:

在vue3模式下
反复点击跳转和返回

// index页面  
uni.navigateTo({  
    url: '../test/test',  
    events: {  
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据  
        someEvent: function(data) {  
            console.log(data)  
        }  
    },  
    success: (res) => {  
        // 通过eventChannel向被打开页面传送数据  
        res.eventChannel.emit('acceptDataFromOpenerPage', {  
            data: 'acceptDataFromOpenerPage触发'  
        })  
    }  
})  

// test页面  
onLoad(option) {  
    // #ifdef APP-NVUE  
    const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE  
    // #endif  
    // #ifndef APP-NVUE  
    const eventChannel = this.getOpenerEventChannel();  
    // #endif  
    eventChannel.emit('someEvent', {  
        data: 'someEvent触发'  
    });  
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据  
    eventChannel.on('acceptDataFromOpenerPage', function(data) {  
        console.log(data)  
    })  
}

预期结果:

// 跳转几次控制台输出几次  
// 第一次  
index.vue:16 {data: "someEvent触发"}  
test.vue:21 {data: "acceptDataFromOpenerPage触发"}  
// 第二次  
index.vue:16 {data: "someEvent触发"}  
test.vue:21 {data: "acceptDataFromOpenerPage触发"}  
// 第三次  
index.vue:16 {data: "someEvent触发"}  
test.vue:21 {data: "acceptDataFromOpenerPage触发"}

实际结果:

// 无论跳转多少次控制台只打印输出一次  
index.vue:16 {data: "someEvent触发"}  
test.vue:21 {data: "acceptDataFromOpenerPage触发"}

bug描述:

通过eventChannel向被打开页面传送数据 , 在vue3中只有第一次页面跳转才会执行, 在vue2中正常跳转则执行

2021-10-05 18:12 负责人:DCloud_UNI_GSQ 分享
已邀请:
t***@qq.com

t***@qq.com

使用 nextTick 可以解决第二次不会触发的问题:

<script setup>   
import { onLoad } from '@dcloudio/uni-app';  
import { getCurrentInstance, nextTick } from 'vue';    

const instance = getCurrentInstance();  
onLoad(async () => {  
  await nextTick();  
  const eventChannel = instance.proxy.getOpenerEventChannel();  
  eventChannel.on('event-name', (...payloads) => {  
    // 处理 payloads  
  });  
});  
</script>

使用 onLoad 生命周期是为了兼容小程序,如果不需要发布小程序,可以不用这个生命周期。

  • 第四维

    好用,成功解决,谢谢~

    2022-10-27 23:09

swx

swx

22年都5月了,这bug还存在。

有问

有问 - 生活,趣与失。

这都半年了,为毛还没修复?

[已删除]

[已删除]

遇到一样的问题 H5存在 小程序正常

DCloud_UNI_Anne

DCloud_UNI_Anne

此问题已记录后续会优化,已加分,感谢您的反馈!

  • Arunner

    您好,那这是官方个bug是吧,最好在官网给个备注提示,我自己试了半天都没成功,一直以为是我自己的写法问题呢。另外我想问一下再hbuilder可以配置跳转查看源码呢?我想直接点击进去看看

    eventChannel.on('acceptId',function(data) {

    console.log('detail.vue id = ' + JSON.stringify(data));

    }),

    2022-02-25 11:29

  • 4***@qq.com

    已经2022年6月了,还没修复

    2022-06-07 16:39

j***@qq.com

j***@qq.com

何时能修复呢

删除这个账号

删除这个账号 - IT

这都一年了,还没修复?

删除这个账号

删除这个账号 - IT

@DCloud_UNI_Anne @DCloud-HBuilderX团队

[已删除]

[已删除]

vue3 的h5会有这个问题..都提了一段时间了还是没有改好,app没有遇到

  • 删除这个账号

    我们就是h5 vue3,还好项目刚开始就发现了,迫使我们降到vue2

    2022-06-28 13:37

  • [已删除]

    回复 删除这个账号: 哈哈,还好我们是app,,但是我用h5开发方便然后遇到了,没有改成VUE2

    2022-06-28 15:17

3***@qq.com

3***@qq.com

有一个小技巧可以规避这个bug.

思路

经过反复实验发现在第二次跳转及以后是先执行完第二个页面的生命周期,再执行uni.navigateTo的success,所以可以通过页面栈获取第二个页面,然后直接调用页面中的methods传参.代码如下.  

路由跳转代码:


    option.success = function(res) {  
        let pages =  getCurrentPages()  
        if(option.url == ("/" + pages[pages.length-1].route)){  
            pages[pages.length-1].routeParameterEvent(option.parameter)  
        }else{  
            res.eventChannel.emit(res.eventChannel.id, option.parameter)  
        }  
    }  
    uni.navigateTo(option);  

第二个页面接收参数代码:


    onLoad: function(option) {  
        // #ifdef APP-NVUE  
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE  
        // #endif  
        // #ifndef APP-NVUE  
        const eventChannel = this.getOpenerEventChannel();  
        // #endif  
        this.eventChannel = eventChannel  
        // // 监听routeParameterEvent事件,获取上一页面通过eventChannel传送到当前页面的数据  
        eventChannel.on(eventChannel.id, this.routeParameterEvent)  
    },  
    methods: {  
        routeParameterEvent(data) {  
            this.routeParameter = data  
        }  
    }  
  • 有问

    思路虽然奇特,但是增加了麻烦,还不如用缓存了。

    2022-07-11 21:17

galenjx

galenjx

一年了还没好呢。。。

要回复问题请先登录注册