Uniapp 页面间反向传值

2023-05-20 16:24| 来源: 网络整理| 查看: 265

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

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

属性类型说明eventChannelEventChannel和被打开页面进行通信

nextPage.eventChannel

想要实现的效果： 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传值"}) }, });

在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也是一样的那么到此为止已经实现了：正向传值，反向传值

【本文地址】

公司简介

联系我们