Uniapp 页面间反向传值

1. Uniapp页面间跳转有多种方式，我们这里只说其中一种： uni.navigateTo(OBJECT) 在Uniapp官网上参数中有多个，我们这里用到其中2个： | 参数 | 类型 | 说明 | | --- | --- | --- | | events | Object| 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 | | success | Function | 接口调用成功的回调函数 |

success的回调函数的返回值说明 success:function(nextPage){}

nextPage.eventChannel

2. 想要实现的效果：

graph TD
A页面 --> B页面
B页面 ---> A页面

说明：A -navigateTo-> B -navigateTo-> C

反向传值： B页面反向传值给A页面，C页面反向传值给B页面
     

3. A -navigateTo-> B

A页面给B页面正向传参的话，常规做法是在url后面拼接参数，方便快捷，
B页面在 onLoad(options)方法中接收一下就可以拿到传过来的值
那么我们现在要将的是通过 eventChannel来正向传值

// A页面要跳转到B页面的点击事件
uni.navigateTo({
    url: "/pages/B',
    events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        // ‘ pageCallBackA ’ 就是监听器的名称，B页面会用这个名字来反向传值
        pageCallBackA: function(data) {
            //data就是下个页面B反向传回来的值：data={title:"B反向传值给A"}
        }
     },
    success: function(nextPage) {
        //nextPage.eventChannel.emit给B页面正向传值，监听器名称：pageSend
        nextPage.eventChannel.emit('pageSend',{title:"A给B传值"})
    },
});

4. 在B页面接收A页面通过eventChannel的正向传参

    //首先需要在B页面data中声明一个属性 名 pageChannel，绑定此页面的 eventChannel
    data(){
        return{
            pageChannel:null,
            //接收 A页面正向给B页面的传参
            pageSend:null,
        }
    },
    //B页面onLoad方法中接收，传参
    onLoad(options){
        // this.getOpenerEventChannel();系统方法直接使用；获取此页面的EventChannel
        this.pageChannel = this.getOpenerEventChannel();
        
        //获取 上个页面A传过来的值 用A中定义的监听器 pageSend 接受
	this.pageChannel.on('pageSend', (params) => {
            this.pageSend = params//params的值就是 {title:"A给B传值"}
	})
    },   

重点来了：如果在B页面我们想要给A页面方向传值怎么办？

    //B页面的 methods方法中我们定义一个
    methods:{
        //在这个方法中我们 反向传值给A页面
        someFuncCallBackDataA(){
            //还是用到了提前定义的属性 pageChannel
            if(!this.pageChannel){
                this.pageChannel = this.getOpenerEventChannel();
            }
            // 在A页面 events里面定义过一个监听器名称是pageCallBack
            this.pageChannel.emit('pageCallBackA', {title:"B反向传值给A"}); 
        }
    
    }

B页面到C页面，C页面反向传值到B也是一样的

那么到此为止已经实现了： 正向传值，反向传值