uniapp页面间传参的几种方法 您所在的位置:网站首页 页面跳转传参不用url带参 uniapp页面间传参的几种方法

uniapp页面间传参的几种方法

2023-08-11 20:00| 来源: 网络整理| 查看: 265

uniapp页面间传参的几种方法

在Uniapp中的传参主要分为以下三种类型:

上级页面 → 下级页面(单向)上级页面 ← 下级页面(单向)上级页面 ↔ 下级页面(双向)

本文将围绕这三种传参展开,分享其使用方法以及我使用中所遇到的问题与解决方法。

一、上级页面 → 下级页面(单向) uni.navigateTo:URL编程式传参

作为最常用也是最简单的跳转携带参数的API,这里不多赘述,想详细了解的朋友可以前往官方文档学习,这里只做传参分享。

官方文档:uni.navigateTo(OBJECT)

携带静态参数 //在起始页面跳转到test.vue页面并传递参数 //作用场景,需要提供固定传参状态的页面,一般和动态参数一起使用 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); 携带动态参数 //在起始页面跳转到test.vue页面并传递参数 let uniapp = { uniappItem: 0, }; //当传递的参数是对象时,必须先转化为JSON格式 uni.navigateTo({ url: 'test?id=1&name=' + JSON.stringify(uniapp), }); 页面接收 // 在test.vue页面接受参数 export default { onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 } } 标签传参

URL有长度限制,太长的字符串会传递失败,可改用窗体通信、全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码,如下为使用encodeURIComponent对参数进行编码的示例。

标签传参 //此处的 :URL 是动态载入,参数是变量; //当使用了 :URl 却使用了静态地址,有可能不生效,同样如果使用了变量却没有用 :URL 也会有问题 页面接收 // 在test.vue页面接受参数 onLoad: function (option) { const item = JSON.parse(decodeURIComponent(option.item)); } 二、上级页面 ← 下级页面(单向)

一般来说 uni.navigateTo 的参数传递可以满足页面的传递,但遇到需要更新上级页面的需求时,就需要使用uni. e m i t ( ) 和 u n i . emit()和uni. emit()和uni.on() 进行页面间通讯。

该方法一般运用在当你从下级页面(或组件)改变数据后,通知上级页面进行刷新或其他操作,实在不清楚也没关系,当你需要时自然明白。

uni.$on(eventName,callback):监听事件

在上级页面设置 uni.$emit() 来监听下级页面的调用,其中的eventName就是事件名称,第二个参数是接受到函数后触发的回调函数。在监听事件结束后一定要移除监听事件,不然会有重复监听的问题。

// 我的页面 onLoad(){ // 监听事件 uni.$on('login',(usnerinfo)=>{ this.usnerinfo = usnerinfo; }) }, onUnload() { // 移除监听事件 uni.$off('login'); }, 触发事件

传递的参数一定是要在对象中的属性

uni.$emit('login', { avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg', token: 'user123456', userName: 'unier', login: true }); 三、上级页面 ↔ 下级页面(双向)

在一般情况下,单向传递已经可以满足我们的业务需求,如向下级页面传递需要显示的参数、变动的状态,向上级页面传递的需要更新的数据或是需要再次调用的函数。

但遇到两个联系十分紧密的页面时,单向传递就无法满足我们的业务需求,向下级页面传递参数和监听事件就会显得特别繁琐。在uniapp中,它将上面两种传递方式加以结合,提供了这样一个方法去实现双向传递:uni.navigateTo({ event:{} })

上级页面内代码 // 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据 uni.navigateTo({ url: 'pages/test?id=1', // 调用通信事件对象 events: { // 获取下级页面参数: // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 // 注意看下级页面中所对应的函数名,你可以定义多个方法去管理传递的参数 acceptDataFromOpenedPage: function(data) { // 对数据做处理 console.log(data) }, someEvent: function(data) { // 对数据做处理 console.log(data) } }, // 发送通信方法 success: function(res) { // 通过eventChannel向被打开页面传送数据 // 其中含有两个参数,第一个是接收的函数名,第二个则是需要携带的参数 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' }) } }) 下级页面内代码 // 在test.vue页面,向起始页通过事件传递数据 // 此方法不是一定要在 onLoad 内调用,哪里需要哪里调 onLoad: function(option) { // 此处声明只是为了显示看起来简洁一点 const eventChannel = this.getOpenerEventChannel(); // emit 代表的就是向上一个页面传递需要更新的数据 eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'}); eventChannel.emit('someEvent', {data: 'data from test page for someEvent'}); // 接收上个页面传递的数据 // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', function(data) { // 对数据做处理 console.log(data) }) }


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有