uniapp不同页面跳转传递数据

上周工作中遇到的坑，打算这周复盘一下，记录下来，防止忘记。
1、App页面的原型大致如下

其实也还算简单，就几个表单项，重点是底下的几个输入框的数据，不是在本页面直接输入，而是由另一个表单页传过来的数据。通过点击添加按钮跳转的添加页面，在添加页面中填入数据，再传到本页面。
特殊地区运费页面如下：

那如何在不通过调用后台接口拿到该页面的数据呢？我的思路大致如下
1、通过naviagteTo中url带参将数据传入（以下代码中注释部分），但是这会导致一个问题，如果是navigateTo，每次点击保存后，跳转到模板页面，就会重新渲染模板页面，那么页面只能传入一次参数，如果想传第二个model，会覆盖前一次点击保存按钮传过去的数据，所以用这个方法不行

 submit(){// uni.navigateTo({//  url: './addFreightTemplate?item='+ this.model// })uni.$emit("handClickBack",{provinceCode: this.model.provinceCode,provinceCodeName: this.model.provinceCodeName,firstAmount: this.model.firstAmount,firstPrice: this.model.firstPrice,continueAmount: this.model.continueAmount,continuePrice: this.model.continuePrice,});uni.navigateBack()}
}

2、之后想到uni.$emit，uni.$on两个来进行页面间通讯，具体如何使用这里不赘述，自行百度，自定义一个事件监听，写在保存按钮的click方法中，代码如下
子页面：

     submit(){uni.$emit("handClickBack",{provinceCode: this.model.provinceCode,provinceCodeName: this.model.provinceCodeName,firstAmount: this.model.firstAmount,firstPrice: this.model.firstPrice,continueAmount: this.model.continueAmount,continuePrice: this.model.continuePrice,});uni.navigateBack()}
}

在父页面中接收传过来的数据，方法代码如下

async onShow() {uni.$on("handClickBack", res => {this.model.list.push({...res})console.log('list', this.model.list)// 清除监听uni.$off('handClickBack');})},

注意一定要写在onShow()中，如果写在onLoad()中，就会数据覆盖

为了方便模板页面添加数据，我特地将添加页面写成组件，让模板页面的html代码简洁，可读性高

uniapp不同页面跳转传递数据相关推荐

android数据回传多个页面_Android Day06四大组件之Activity多页面跳转和数据传递
ToolBar中menu无法同时显示图标和文字问题的解决方法 Toolbar添加返回按钮 ToolBar与ActionBar 1.什么是Activity 官方文档是这么说的:Anwhich users ...
ios把数据传递到另一个页面_iOS页面跳转及数据传递（三种）
iOS页面跳转: 第一种 [self.navigationController pushViewController:subTableViewController animated:YES]; //描 ...
【小程序】实现页面跳转和数据传递方案
文章目录页面跳转和数据传递 wx的API跳转 navigator组件(了解) 页面跳转和数据传递界面的跳转有两种方式:通过navigator组件和通过wx的API跳转这里我们先以wx的API ...
Android活动+《恐怖游轮》带你了解跳转传递数据如何随时结束程序小技巧
恐怖邮轮(有剧透!没看过的建议先观看电影!也可以直接目录跳转相关知识点) 1.到达船坞,众人出海(页面跳转,数据传递) 1.1驱车前往:Intent 1.2杰西上车:putExtra 1.3杰西下车: ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
6.Android的学习(Intent跳转页面,活动之间传递数据)
Intent跳转页面 (1)使用显示Intent,首先创建一个空的活动,并且有布局,在onClick()下面添加: Intent里面的第一个参数是当前活动页面,第二参数是要跳转的活动页面.这段代码在当 ...
Android应用开发：页面跳转和数据传递
1. Activity的跳转 1.1 创建第二个Activity 需要在清单文件中为其配置一个activity标签标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-fi ...
面试题 - 两个页面间如何传递数据
针对这个问题我只能说说自己的理解了,肯定会有遗漏,毕竟我前端也不怎么会,有其他方法的朋友可以指出来,这样我也好再学习一下. 1 如果页面A和页面B是同域的情况如果是同域那么两者之间可以直接通过客户端 ...
[转] 微信小程序页面跳转传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

uniapp不同页面跳转传递数据

uniapp不同页面跳转传递数据相关推荐

最新文章

热门文章