uni-app 两个页面传值

简介: 1 可以使用路由传参的方式来打开页面并传递数据。2 可以通过 uni-app中的全局变量来传递值。

1 可以使用路由传参的方式来打开页面并传递数据。
如这里传递的一个列表数据 以下是具体步骤:

1.1 确定数据格式
例如我们要传递一个名为 listData 的List,其中包含 name 和 age 两个属性:

let listData = [
  {name: 'Tom', age: 20},
  {name: 'Jerry', age: 18},
  {name: 'Lucy', age: 22},
]

2.2 在发送数据的页面中,使用 uni.navigateTo 方法打开目标页面,并在 url 后面添加参数:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?listData=' + JSON.stringify(listData),
})

注意,由于路由只能传递字符串类型,因此需要使用 JSON.stringify() 将List数据转换为字符串。

1.3 在接收数据的页面中,通过 onLoad 方法获取参数,并使用 JSON.parse() 将字符串转换为List数据格式:

onLoad: function(options) {
  let listData = JSON.parse(options.listData)
  console.log(listData)
}

这里的 options.listData 即为发送页面中传递的参数,通过 JSON.parse() 方法将其转换为List数据格式,并进行打印输出。

通过以上步骤,我们就可以在uniapp中打开页面并传递List数据了。

2 可以通过 uni-app中的全局变量来传递值。
以下是具体步骤:

2.1 在 App.vue 中定义全局变量
例如:

export default {
  globalData: {
    message: ''
  },
  ...
}

2.2 在需要传值的页面中,设置全局变量的值:

this.$root.globalData.message = 'Hello World!';

2.3 在需要获取传值的页面中,直接访问全局变量的值即可:

console.log(this.$root.globalData.message); // 输出:Hello World!

另外,还可以使用路由跳转时传递参数的方式,在 $router.push 等方法中指定参数进行传递。

如果你有兴趣可以关注一下公众号 biglead 来获取更多内容,或者访问我的课程

相关文章
|
3月前
|
存储 移动开发 JavaScript
uni-app页面数据传参方式
uni-app页面数据传参方式
274 4
|
3月前
|
移动开发 JavaScript 前端开发
如何识别app中的页面是否是js(h5)页面
如何识别app中的页面是否是js(h5)页面
48 2
|
3月前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
118 4
|
3月前
|
JSON 数据格式
点击app系统消息打开app并进入指定页面
点击app系统消息打开app并进入指定页面
64 0
|
3月前
|
定位技术
如何让app多个页面只用一个地图实例
如何让app多个页面只用一个地图实例
24 0
|
3月前
|
编译器 程序员 iOS开发
APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局
APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局
39 0
|
3月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
39 0
|
3月前
|
小程序
深入理解 uni-app 页面生命周期(四)onShareAppMessage
深入理解 uni-app 页面生命周期(四)onShareAppMessage
179 0
|
3月前
|
C++
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
196 0
|
3月前
|
JavaScript
深入理解 uni-app 页面生命周期(二):onReady()
深入理解 uni-app 页面生命周期(二):onReady()
195 0