[uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式 使用案例 代码注释

目录

    • 一、传递方式
      • 1. URL传参
      • 2. Storage传参
      • 3. Vuex传参
      • 4.api传参eventChannel
    • 二、接受方式
      • 1. URL传参
      • 2. Storage传参
      • 3. Vuex传参
      • 4.api传参eventChannel
    • 三、使用案例
    • 四.提醒

在uniapp中,页面传参是非常常见的需求。本文将详细讲解uniapp中页面传参的传递方式和接受方式,以及使用案例,同时附上代码注释。

一、传递方式

1. URL传参

URL传参是一种比较简单的传递方式,它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数,例如:

<uni-button @click="goToDetail">跳转到详情页</uni-button>//编程式传参  比较常用
<navigator url="/pages/detail/detail?id=123">跳转到详情页</navigator>//标签传参
// 跳转到详情页,并传递id参数
goToDetail() {uni.navigateTo({url: '/pages/detail/detail?id=123'})
}

在接收页面中,我们可以通过this.$route.query来获取传递的参数:

export default {onLoad() {console.log(this.$route.query.id) // 输出:123}
}

对于微信小程序 this.$ route.query.id 可能不能使用 因为微信小程序不识别 this.$ route
而替代方案
不使用this.$ route 使用 onload传参

onLoad(getData) {//getData就是参数对象  兼用微信小程序console.log(getData.id);		
}

2. Storage传参

Storage传参是通过uni-app提供的Storage API来传递参数的。我们可以在跳转之前将参数存储到Storage中,然后在接收页面中获取:

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页,并将id参数存储到Storage中
goToDetail() {uni.setStorageSync('id', 123)uni.navigateTo({url: '/pages/detail/detail'})
}

在接收页面中,我们可以通过uni.getStorageSync来获取存储的参数:

export default {onLoad() {console.log(uni.getStorageSync('id')) // 输出:123}
}

3. Vuex传参

Vuex传参是通过uni-app提供的Vuex API来传递参数的。我们可以在跳转之前将参数存储到Vuex中,然后在接收页面中获取:

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页,并将id参数存储到Vuex中
goToDetail() {uni.$emit('setId', 123)uni.navigateTo({url: '/pages/detail/detail'})
}

在Vuex中,我们可以定义一个state来存储参数:

const store = new Vuex.Store({state: {id: ''},mutations: {setId(state, id) {state.id = id}}
})

在接收页面中,我们可以通过mapState来获取存储的参数:

import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {console.log(this.id) // 输出:123}
}

4.api传参eventChannel

api传参是通过uni-app提供的API来传递参数的。我们可以在跳转之前将参数存储到options中,例如:

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页,并传递id参数
goToDetail() {uni.navigateTo({url: '/pages/detail/detail',success: (res) => {res.eventChannel.emit('acceptDataFromOpenerPage', { id: 123 })}})
}

在这个例子中,我们使用了eventChannel来传递参数。我们在跳转之前,通过success回调函数来获取eventChannel,然后通过emit方法来传递参数。

在api传参的方式中,我们可以通过uni.on来监听传递的参数:

export default {onLoad() {const eventChannel = this.getOpenerEventChannel()eventChannel.on('acceptDataFromOpenerPage', (data) => {console.log(data.id) // 输出:123})}
}

在这个例子中,我们通过getOpenerEventChannel方法来获取eventChannel,然后通过on方法来监听传递的参数。

二、接受方式

1. URL传参

在URL传参的方式中,我们可以通过this.$route.query来获取传递的参数:

export default {onLoad() {console.log(this.$route.query.id) // 输出:123}
}

2. Storage传参

在Storage传参的方式中,我们可以通过uni.getStorageSync来获取存储的参数:

export default {onLoad() {console.log(uni.getStorageSync('id')) // 输出:123}
}

3. Vuex传参

在Vuex传参的方式中,我们可以通过mapState来获取存储的参数:

import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {console.log(this.id) // 输出:123}
}

4.api传参eventChannel

在api传参的方式中,我们可以通过uni.on来监听传递的参数:

export default {onLoad() {const eventChannel = this.getOpenerEventChannel()eventChannel.on('acceptDataFromOpenerPage', (data) => {console.log(data.id) // 输出:123})}
}

在这个例子中,我们通过getOpenerEventChannel方法来获取eventChannel,然后通过on方法来监听传递的参数。

三、使用案例

下面是一个完整的使用案例,包括传递和接收参数的方式:

// pages/index/index.vue
<template><view><uni-button @click="goToDetail">跳转到详情页</uni-button></view>
</template><script>
export default {methods: {goToDetail() {// URL传参// uni.navigateTo({//   url: '/pages/detail/detail?id=123'// })// Storage传参// uni.setStorageSync('id', 123)// uni.navigateTo({//   url: '/pages/detail/detail'// })// Vuex传参uni.$emit('setId', 123)uni.navigateTo({url: '/pages/detail/detail'})}}
}
</script>// pages/detail/detail.vue
<template><view><text>{{ id }}</text></view>
</template><script>
import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {// URL传参// console.log(this.$route.query.id)// Storage传参// console.log(uni.getStorageSync('id'))// Vuex传参// console.log(this.id)}
}
</script>// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {id: ''},mutations: {setId(state, id) {state.id = id}}
})uni.$on('setId', id => {store.commit('setId', id)
})export default store

以上就是uniapp中页面传参的传递方式和接受方式的详细讲解,以及使用案例和代码注释。希望对大家有所帮助!

四.提醒

以上的页面传参方式中

  1. URL传参
  2. Storage传参
    比较常用 可以满足大家的开发需求

另外的传参方式 看场景和需求在做处理
希望对你有所帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/686743.shtml

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

相关文章

003 - Hugo, 创建文章

003 - Hugo, 创建文章创建文章单个md文件md文件图片总结 文章内容Front Matter文章目录数学公式的显示KaTeXMathJax 图片 003 - Hugo, 创建文章 创建文章 单个md文件 创建文章的方式&#xff1a; 手动创建&#xff1a;在post目录下&#xff0c;手动创建md文件。命令创建&am…

QObject 的拷贝构造和赋值操作

QObject中没有提供一个拷贝构造函数和赋值操作符给外界使用&#xff0c;其实拷贝构造和赋值的操作都是已经声明了的&#xff0c;但是它们被使用了Q_DISABLE_COPY () 宏放在了private区域。因此所有继承自QObject的类都使用这个宏声明了他们的拷贝构造函数和赋值操作符为私有。 …

Java集合篇之深入解析LinkedList

写在开头 作为ArrayList的同门师兄弟&#xff0c;LinkedList的师门地位逊色不少&#xff0c;除了在做算法题的时候我们会用到它之外&#xff0c;在实际的开发工作中我们极少使用它&#xff0c;就连它的创造者都说&#xff1a;“I wrote it&#xff0c;and I never use it”&am…

[java基础揉碎]二维数组

目录 什么是二维数组&#xff1a; 二维数组在内存中的布局: 动态初始化: 静态初始化: 杨辉三角: 使用细节和注意事项: 什么是二维数组&#xff1a; 1.从定义形式上看 int[][] 2.可以这样理解&#xff0c;原来的一维数组的每个元素是一维数组&#xff0c;就构成二维数…

OpenCV识别人脸案例实战

使用级联函数 基本流程 函数介绍 在OpenCV中&#xff0c;人脸检测使用的是cv2.CascadeClassifier.detectMultiScale()函数&#xff0c;它可以检测出图片中所有的人脸。该函数由分类器对象调用&#xff0c;其语法格式为&#xff1a; objects cv2.CascadeClassifier.detectMul…

Spring源码笔记之SpringIOC--(1)从XML文件到Bean的描述对象BeanDefinition

从XML文件到Bean的描述对象BeanDefinition 最开始学习spring的入门实践是&#xff0c;编写一个xml文件&#xff0c;然后利用spring读取xml文件中配置的bean。 编写一个xml配置文件default.xml <?xml version"1.0" encoding"UTF-8"?> <beans x…

问题:由于环境因素或人为因素干扰,致使土地生态系统的结构和功能失调,引起() #学习方法#经验分享

问题&#xff1a;由于环境因素或人为因素干扰&#xff0c;致使土地生态系统的结构和功能失调&#xff0c;引起&#xff08;) A&#xff0e;土地退化 B&#xff0e;土壤污染 C&#xff0e;生态平衡失调 D&#xff0e;土地沙化 参考答案如图所示

JavaSE-03笔记【继承~super】

文章目录 1. 继承1.1 继承概述&#xff08;理解&#xff09;1.2 如何继承&#xff08;掌握&#xff09;1.2.1 继承的语法格式1.2.2 具体举例 1.3 继承的相关特性&#xff08;掌握&#xff09;1.4 对继承自Object类的方法的测试&#xff08;理解&#xff09;1.5 难点解惑1.5.1 掌…

element ui 添加自定义方法

今天在修改 el-table 源码过程中遇到一个头大的问题&#xff0c;原本修改编译后&#xff0c;将 element的子目录lib下的文件复制到项目的响应目录里就可以了&#xff0c;但是&#xff0c;这次不知为何&#xff0c;编译老是出问题&#xff0c;实在没有办法&#xff0c;我就直接修…

JavaScript 分号踩坑

今天踩了一个JavaScript分号的坑 我想使用JavaScript的解构赋值语法来实现交换两个变量的值而不必引入第三个变量&#xff0c;代码如下所示&#xff1a; let a 100 let b 200 [a,b] [b,a] console.log(a) console.log(b)因为习惯了不加分号&#xff0c;所以没加分号产生报错…

leetcode hot 100最小花费爬楼梯

本题和之前的爬楼梯类似&#xff0c;但是需要考虑到花费的问题&#xff01;**注意&#xff0c;只有在爬的时候&#xff0c;才花费体力&#xff01;**那么&#xff0c;我们还是按照动态规划的五部曲来思考。 首先我们要确定dp数组的含义&#xff0c;那么就是我们爬到第i层所花费…

代码随想录 Leetcode134. 加油站

题目&#xff1a; 代码(首刷看解析 2024年2月15日&#xff09;&#xff1a; class Solution { public:int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {int curSum 0;int sum 0;int startIndex 0;for (int i 0; i < gas.size(); i)…

SCI文章复现 | GEO文章套路,数据下载和批次效应处理

原文链接&#xff1a; SCI文章复现 | GEO文章套路&#xff0c;数据下载和批次效应处理https://mp.weixin.qq.com/s/KBA67EJ7cCK5NDTUzrwJ2Q 一、前言 这是2024年春节后的第一个推送教程&#xff0c;我们也给大家赠送一个福利。将前期的付费教程免费推送给大家。其实&#xff…

【头歌·计组·自己动手画CPU】四、控制器设计(理论版) 【计算机硬件系统设计】

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎 ❤️关注 &#x1f44d;点赞 &#x1f64c;收藏 ✍️留言 文章目录 一、课程设计目的二、课程设计内容三、课程设计步骤四、课程设计总结 一、课程设计目的 掌握 CPU …

ChatGPT绘图指南:DALL.E3玩法大全(二)

在前一篇文章中&#xff0c;我们介绍了什么是 DALL.E3 模型&#xff0c; DALL.E3 有什么优势&#xff0c;使用DALL.E3 的两种方法&#xff0c;以及DALL.E3 绘图的基本规则&#xff0c; 感兴趣的朋友请前往查看: ChatGPT绘图指南&#xff1a;DALL.E3玩法大全(一). 接下来&#…

什么是Java中的非阻塞I/O,你能提供一个例子吗?

什么是Java中的非阻塞I/O&#xff0c;你能提供一个例子吗&#xff1f; 在Java中&#xff0c;非阻塞I/O是一种I/O模型&#xff0c;它允许程序在等待数据就绪时继续执行其他任务&#xff0c;而不必一直阻塞等待数据的到来。非阻塞I/O通常与多路复用技术&#xff08;如Java NIO的…

[UI5 常用控件] 09.IconTabBar,IconTabHeader,TabContainer

文章目录 前言1. IconTabBar1.1 简介1.2 基本结构1.3 用法1.3.1 颜色&#xff0c;拖放&#xff0c;溢出1.3.2 Icons Only , Inner Contents1.3.3 showAll,Count,key,IconTabSeparator 1.3.4 Only Text1.3.5 headerMode-Inline1.3.6 design,IconTabSeparator-icon1.3.7 DensityM…

【AIGC】Stable Diffusion插件安装

Stable Diffusion 的插件安装通常需要遵循以下步骤&#xff1a; 第一、查找插件&#xff0c;您需要确定您想要安装的 Stable Diffusion 插件。您可以从 Stable Diffusion 的官方网站或社区论坛上找到各种各样的插件&#xff0c;这些插件可能提供了额外的功能、模型或工具。 第…

Java 和 JavaScript 的奇妙协同:语法结构的对比与探索(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【英语学习】Day 01

List 01 wordtranslatesparsityn.稀少promotingv.促进、振兴&#xff0c;宣传regularizationn.n. 正规化&#xff1b;调整&#xff1b;合法化&#xff1b;Sparsity-Promoting Regularization稀疏促进正则化Multipath Error多路径误差mitigationn. 缓解&#xff1b;减轻&#x…