zoukankan      html  css  js  c++  java
  • uni-app页面通信,传递复杂数据

    > 使用 uni.navigateTo 跳转B页面(指下方代码的 test.vue 页面),跳转完成后,会触发 navigateTo 的回调函数success,使用 res.eventChannel 向被打开的页面传送数据。

    > 被打开的页面B页面(test.vue),也可以在页面任意处,使用代码 this.getOpenerEventChannel().emit('acceptDataFromOpenedPage', { data: 'test' }); 触发A页面 navigateTo 中 events 事件频道中定义的事件(事件名称要一致)。

    A页面

    methods: {
        // 跳转到B页面test.vue
        jumpNewPage() {
            // 2.8.9+ 支持
            uni.navigateTo({
                // 跳转到的目标页面
                url: 'pages/test?id=1',
                // 页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
                events: {
                    /// 添加一个监听器,名称为acceptDataFromOpenedPage,用于获取被打开页面传送到当前页面的数据
                    ///     B页面test.vue,使用eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' }); 触发此监听函数
                    acceptDataFromOpenedPage: function(data) {
                        console.log(data);
                    },
                    // 同上
                    someEvent: function(data) {
                        console.log(data);
                    }
                },
                // 接口调用成功的回调函数,即跳转到B页面 test.vue 后的回调函数
                success: function(res) {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' });
                }
            });
        }
    }

    B页面text.vue

    // uni.navigateTo 到的目标页面 pages/test.vue 的页面加载事件
    onLoad: function(option) {
        console.log(option.query);
        
        // 获取 eventChannel 事件频道
        const eventChannel = this.getOpenerEventChannel();
        
        // 触发事件频道 eventChannel 上已存在的事件(即A页面在 navigateTo events 中的监听器事件)
        eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' });
        eventChannel.emit('someEvent', { data: 'test' });
        
        // 监听 acceptDataFromOpenerPage 事件,获取上一页面通过事件频道 eventChannel 传送到当前页面的数据
        eventChannel.on('acceptDataFromOpenerPage', function(data) {
            console.log(data);
        });
    }
    嘴角上扬,记得微笑
  • 相关阅读:
    c++ 反汇编 堆变量
    glibc源码逆向——fread函数
    glibc源码逆向——fopen
    buu查漏补缺刷题(3)
    gyctf_2020_borrowstack
    实现用句柄表反调试
    pwnable_orw 学习shellcraft新花样
    buu查漏补缺刷题(2)
    gdb调试源码
    buu查漏补缺刷题(1)
  • 原文地址:https://www.cnblogs.com/jardeng/p/14551228.html
Copyright © 2011-2022 走看看