3***@qq.com
3***@qq.com
  • 发布:2021-10-05 18:12
  • 更新:6 天前
  • 阅读:162

【报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 负责人:无 分享
已邀请:
紫菜苔

紫菜苔

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

DCloud_UNI_Anne

DCloud_UNI_Anne

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

要回复问题请先登录注册