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);
    });
}