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.mzph.cn/news/130724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零实现的浏览器Web脚本

从零实现的浏览器Web脚本 在之前我们介绍了从零实现Chrome扩展,而实际上浏览器级别的扩展整体架构非常复杂,尽管当前有统一规范但不同浏览器的具体实现不尽相同,并且成为开发者并上架Chrome应用商店需要支付5$的注册费,如果我们只…

【软考中级】软件设计师-下午题

下午题 试题一 黑洞:加工有输入无输出 白洞(奇迹):加工有输出无输入 灰洞:数据流输入的加工不足以产生输出 结构化语言: IF *** THEN ELSE IF *** THEN ******* END IF END IF 数据流的父子图平衡,如果父子图平衡就不…

Mybatis 概述

一、Mybatis 概述 1.Mybatis是什么? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息&#xff0…

Python虚拟环境相关

写深度学习代码前,总要把Github上许多开源代码下下来跑一下。不同的项目有不同的运行环境,因此,就免不了为每个项目配置不同的库。本科的时候嫌虚拟环境太麻烦,就直接略过没学,现在还是得来补课。 一般而言&#xff0…

队列实现(基于内存池思想)

1. 阅读公司代码的时候,发现公司代码向串口打印,先把数据加载到数组中,进入临界区,然后通过串口输出,退出临界区。 2. 当然还有向flash写数据,直接一次性原文写入,也没进入临界区,挂…

【CIO人物展】黄淮学院副CIO周鹏:构建数智化平台赋能学校高质量发展

周鹏 本文由黄淮学院副CIO周鹏投递并参与《2023中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业—锐捷网络 大数据产业创新服务媒体 ——聚焦数据 改变商业 黄淮学院是2004年经教育部批准成立的一所省属全日制普通本科高校。学校位于素有“豫州之腹地、天下之最中”之美…

第十七节——指令

一、概念 在Vue.js中,指令(Directives)是一种特殊的语法,用于为HTML元素添加特定的行为和功能。指令以v-作为前缀,通过在HTML标签中使用这些指令来操作DOM,修改元素的属性、样式或行为。 Vue.js提供了一组…

地理信息系统原理-空间数据结构(7)

​四叉树编码 1.四叉树编码定义 四叉树数据结构是一种对栅格数据的压缩编码方法,其基本思想是将一幅栅格数据层或图像等分为四部分,逐块检查其格网属性值(或灰度);如果某个子区的所有格网值都具有相同的值&#xff0…

Linux----------------Shell重定向输入输出

(一) 标准输入 以键盘读取用户输入的数据,然后再把数据拿到 Shel程序中使用。 标准输出 Shell 程序产生的数据,这些数据一般都是呈现到显示器上供用户浏览查看 输入输出重定向 输入方向就是数据从哪里流向程序。数据默认从键…

Flink SQL Over 聚合详解

Over 聚合定义(⽀持 Batch\Streaming):**特殊的滑动窗⼝聚合函数,拿 Over 聚合 与 窗⼝聚合 做对⽐。 窗⼝聚合:不在 group by 中的字段,不能直接在 select 中拿到 Over 聚合:能够保留原始字段…

【使用Python编写游戏辅助工具】第五篇:打造交互式游戏工具界面:PySide6/PyQT高效构建GUI工具

前言 这里是【使用Python编写游戏辅助工具】的第五篇:打造交互式游戏工具界面:PySide6/PyQT高效构建GUI工具。本文主要介绍使用PySide6来实现构建GUI工具。 在前面,我们实现了两个实用的游戏辅助功能: 由键盘监听事件触发的鼠标连…

IntelliJ IDEA 2023 最新版如何试用?IntelliJ IDEA 2023最新版试用方法及验证ja-netfilter配置成功提示

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

文件上传学习笔记

笔记 文件上传 文件上传是指将本地图片,视频,音频等文件上传到服务器,供其它用户浏览或下载的过程 文件上传前端三要素 : file表单项 post方式 multipart/from-data 服务端接收文件 : 用spring中的API : MultipartFile 要想文件名唯一 …

[极客大挑战 2019]Http 1

题目环境: 看起来挺花里胡哨的 F12查看源代码寻找隐藏文件 这是啥子呀,果然防不胜防 点击隐藏文件Secret.php 它不是来自这个地址的请求 报头:https://Sycsecret.buuoj.cn 需要抓包,在抓包前了解部分数据包参数 GET:到 Host:来自 …

Mysql my.cnf配置文件参数详解

Linux 操作系统中 MySQL 的配置文件是 my.cnf,一般会放在 /etc/my.cnf 或 /etc/mysql/my.cnf 目录下。 如果你使用 rpm 包安装 MySQL 找不到 my.cnf 文件,可参考如下: 第一步: 通过cd命令 cd /usr/share/mysql 来到这个目录&#…

ElementUI 自定义 Tree 树形控件背景

在 template 中 <div class"container"><el-tree :data"treeList" :props"defaultProps" accordion node-click"handleNodeClick" /> </div> 在 script 中 treeList: [{ id: "-1", label: "区域选…

由于flutter_app依赖于flutter_swiper>=0.0.2,不支持零安全,版本解决失败。

参考 dart3.0使用flutter_swiper报错记录 flutter_swiper package - All Versions从官网的信息可以看到 Dart3版本不兼容 最小兼容的Dart SDK版本需要2.0 Flutter SDK 版本列表Flutter SDK 版本列表 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter 说明&#xff1a;因…

算法:Java构建二叉树并递归实现二叉树的前序、中序、后序遍历

先自定义一下二叉树的类&#xff1a; // Definition for a binary tree node. public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left…

Python和SQLite游标处理多行数据

如果您需要处理多行数据&#xff0c;使用游标或其他适当的方法是更好的选择。以下是一些处理多行数据的方法&#xff1a; 使用游标&#xff1a;游标可以逐行处理查询结果&#xff0c;这对于大量数据或需要逐行处理的场景非常有用。以下是一个使用Python和SQLite的游标示例&…

对Java的多线程的理解

说说对Java线程的理解 下面是AI的回答 Java线程就是Java程序里面可以同时运行多个任务。Java提供了几种创建和管理线程的方式&#xff0c;其中一种是继承Thread类&#xff0c;另一种是实现Runnable接口或Callable接口。jdk5提供了线程池&#xff0c;可以更方便地创建、启动和终…