任务5-3知识技能:uniapp项目中页面间传递数据的三种方式

第一种(在跳转页面时使用URL编程式传参)

1.1 单向传递:只能上级页面传递到下级页面

提示: 这种方法不适用传递大量的数据,传递的数据只能是string类型,如果想要传递对象或数组则需要使用JSON.stringify进行转换。但uni.navigateBack不能传参,因为它不携带跳转路由

上级页面(通过URL传递数据)
click(){
    uni.navigateTo({
        url:'/pages/service/service?nicheng='+gongsi+'&&text='+this.text'
    })
}
下级页面(通过onLoad接收数据)
onLoad(e){
    console.log(this.nicheng);
    console.log(this.text);
}

1.2 双向传递:上级页面可以传递给下级页面,下级页面也可以传递给上级页面

上级页面(使用events,利用下级页面向上级页面传递数据的变量名获取传递的参数)
click(){
                uni.navigateTo({
                    url:'/pages/test/test?id=1',
                    events:{
                        //获取下级页面传递回来的参数
                        sonPageData:data=>{
                            console.log(data);
                        }
                    }
                })
            }
下级页面(利用this.getOpenerEventChannel().emit向上级页面传递参数的变量名和变量值)
onLoad(e){
            console.log(e.id);
            this.getOpenerEventChannel().emit('sonPageData',"我是第二个页面传递回来的数据")
        }

第二种(利用uni.setStorageSync和uni.getStorageSync进行数据的缓存和取出以及最后对缓存数据的销毁)

传递值页面(对需要传递的数据进行数据缓存),缓存的数据必须为字符串形式,对象或数组需要先进行转换
let obj = JSON.stringify(this.userInfo[e])
uni.setStorageSync('userInfo',obj)
接收值页面(对缓存的数据进行取出并且进行销毁)
onLoad() {
    
    var data = uni.getStorageSync('userInfo')//取出缓存数据
    var res = JSON.parse(data)
    this.userInfo = res
    uni.removeStorageSync('userInfo')//销毁缓存数据
    console.log(data);
}

第三种 (利用uni.emit 和 uni.on进行跨页面传值)

传递值页面(使用uni.$emit传递值的变量名和变量值)
uni.$emit('UserInfo',this.userInfo)
由于uni.emit 和 uni.on属于全局跨页面传参,所有在接收值页面要在onUnload周期添加移除监听事件。
onUnload() {
            uni.$off('UserInfo')
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题。在实际的开发过程中,可以通过以下几种方法来实...
    泊多前端阅读 2,878评论 0 0
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    __Mr_Xie__阅读 1,479评论 0 1
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    绿茵场上的码者阅读 46,601评论 1 21
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    flyjar阅读 771评论 0 2
  • uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Andro...
    水岸东方阅读 285评论 0 0