uniapp 页面间传参方法
页面之间传参大概可分为以下几种情况：
- 上级页面 → 下级页面（单向）
- 上级页面 ← 下级页面（单向）
- 上级页面 ↔ 下级页面（双向）
一、上级页面 → 下级页面（单向）
uni.navigateTo:URL编程式传参
作为最常用也是最简单的跳转携带参数的API，这里不多赘述，想详细了解的朋友可以前往官方文档学习，这里只做传参分享。
官方文档：uni.navigateTo(OBJECT)
1、携带静态参数
//在起始页面跳转到test.vue页面并传递参数
//作用场景，需要提供固定传参状态的页面，一般和动态参数一起使用
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});2、携带动态参数
//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
uniappItem: 0,
};
//当传递的参数是对象时，必须先转化为JSON格式
uni.navigateTo({
url: 'test?id=1&name=' + JSON.stringify(uniapp),
});3、页面接收 。注意是在onload方法中接收。
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}4、<navigator>标签传参
URL有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用
encodeURIComponent对参数进行编码的示例。
//此处的 :URL 是动态载入，参数是变量;
//当使用了 :URl 却使用了静态地址，有可能不生效，同样如果使用了变量却没有用 :URL 也会有问题
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>页面接收
// 在test.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}二、上级页面 ← 下级页面（单向）
一般来说 uni.navigateTo 的参数传递可以满足页面的传递，但遇到需要更新上级页面的需求时，就需要使用uni.e m i t ( ) 和 u n i . emit()和uni.emit()和uni.on() 进行页面间通讯。
该方法一般运用在当你从下级页面（或组件）改变数据后，通知上级页面进行刷新或其他操作，实在不清楚也没关系，当你需要时自然明白。
1、uni.$on(eventName,callback)：监听事件
在上级页面设置
uni.$emit()来监听下级页面的调用，其中的eventName就是事件名称，第二个参数是接受到函数后触发的回调函数。在监听事件结束后一定要移除监听事件，不然会有重复监听的问题。
// 我的页面
onLoad(){
// 监听事件
uni.$on('login',(usnerinfo)=>{
this.usnerinfo = usnerinfo;
})
},
onUnload() {
// 移除监听事件
uni.$off('login');
},2、触发事件
传递的参数一定是要在对象中的属性
uni.$emit('login', {
avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
token: 'user123456',
userName: 'unier',
login: true
});三、上级页面 ↔ 下级页面（双向）
在一般情况下，单向传递已经可以满足我们的业务需求，如向下级页面传递需要显示的参数、变动的状态，向上级页面传递的需要更新的数据或是需要再次调用的函数。
但遇到两个联系十分紧密的页面时，单向传递就无法满足我们的业务需求，向下级页面传递参数和监听事件就会显得特别繁琐。在uniapp中，它将上面两种传递方式加以结合，提供了这样一个方法去实现双向传递：uni.navigateTo({ event:{} })
1、上级页面内代码
// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
url: 'pages/test?id=1',
// 调用通信事件对象
events: {
// 获取下级页面参数：
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
// 注意看下级页面中所对应的函数名，你可以定义多个方法去管理传递的参数
acceptDataFromOpenedPage: function(data) {
// 对数据做处理
console.log(data)
},
someEvent: function(data) {
// 对数据做处理
console.log(data)
}
},
// 发送通信方法
success: function(res) {
// 通过eventChannel向被打开页面传送数据
// 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
}
})2、下级页面内代码
// 在test.vue页面，向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用，哪里需要哪里调
onLoad: function(option) {
// 此处声明只是为了显示看起来简洁一点
const eventChannel = this.getOpenerEventChannel();
// emit 代表的就是向上一个页面传递需要更新的数据
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
// 接收上个页面传递的数据
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
// 对数据做处理
console.log(data)
})
}