当前位置: 首页 > news >正文

uniapp页面间传参的方法

在uniapp中,常见的页面传参方式有以下几种:

  1. URL传参

可以在跳转页面时,在url中添加参数,通过在目标页面的onLoad函数中的options参数获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({url: '/pages/targetPage/index?id=123&name=test'
});

在目标页面中:

onLoad: function(options) {console.log(options.id);console.log(options.name);
}

  1. Vuex状态管理

可以在源页面设置一个state,然后在目标页面中获取该state的值。示例代码如下:

在源页面中:

this.$store.state.id = 123;
this.$store.state.name = 'test';
uni.navigateTo({url: '/pages/targetPage/index'
});

在目标页面中:

computed: {id: function() {return this.$store.state.id;},name: function() {return this.$store.state.name;}
}

  1. uni传参

可以在源页面使用uni对象的navigateTo方法传参,在目标页面中使用uni对象的getOpenerEventChannel方法获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({url: '/pages/targetPage/index',success: function(res) {var channel = uni.getOpenerEventChannel();channel.emit('passData', {id: 123, name: 'test'});}
});

在目标页面中:

onLoad: function() {var _this = this;var channel = uni.getOpenerEventChannel();channel.on('passData', function(data) {_this.id = data.id;_this.name = data.name;});
}

其中,emit方法用于向目标页面传递数据,on方法用于监听由emit方法传递过来的数据。

http://www.lryc.cn/news/215314.html

相关文章:

  • vsan 7.0.3部署后常见问题
  • 【Git】Git使用指南+上传项目踩坑总结
  • Django之登录注册
  • Android 10-11适配外部存储方案
  • 软件测试/测试开发丨Python:易学、强大、多用途的编程语言
  • 一、VPN基础
  • 淘宝协议最新版
  • AI“走深向实”,蚂蚁蚁盾在云栖大会发布实体产业「知识交互建模引擎」
  • 如何估计池塘里鱼的数目,周边有多少车辆?
  • docker中安装rabbitMq并配置启动
  • viewfs://为Hadoop 中的一个特殊文件系统
  • UniPro自定义个人专属工作台 大幅提升工作效率
  • python调用飞书机器人发送文件
  • 【产品应用】一体化伺服电机在焊接设备中的应用
  • uni+vue3+firstUI——组件弹框使用 v-model绑定参数
  • 【电路笔记】-正弦波形
  • Failed to launch task: 文件”Setup”不存在 Mac安装Adobe软件报错解决方案
  • 什么是 DevOps
  • java修仙基石篇->instanceof子父类检查
  • [笔记] ‘\0‘的含义:任何字符串后面都会有的结束符。
  • 雪花算法:分布式ID生成的优雅解决方案(建议收藏)
  • 全国产EtherCAT运动控制边缘控制器(六):RtBasic文件下载与连续轨迹加工的Python+Qt开发
  • git代码行统计
  • LEEDCODE 2235两整数相加
  • 魔术般的速度,焕然一新的磁盘空间 - Magic Disk Cleaner for Mac 2023
  • 项目切换多租户导致的数据库SQL执行异常
  • 安防视频监控平台EasyCVR服务器需要开启firewalld防火墙,该如何开放端口?
  • Ubuntu Desktop 20.04升级gcc-11
  • 网站如何改成HTTPS访问
  • LeetCode 996.正方形数组的数目