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代码简洁，可读性高