1. 直接在 url 后面拼接传递参数(单页面传参)
url: 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,在下一个页面的onLoad函数中可得到传递的参数
A页面代码:
//跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
test页面代码:
// test.vue页面接受参数
export default {
onLoad: function (option) {
//option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
2.事件监听传参,监听被打开页面发送到当前页面的数据(页面之间相互传参)
A页面代码:
// 跳转到test.vue页面传递参数,并监听test.vue发送过来的事件数据
uni.navigateTo({
url: 'pages/test',
events: {
// 为指定事件添加一个监听器,获取test.vue页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
// 事件名称可以自定义
someEvent: function(data) {
console.log(data)
}
},
success: function(res) {
// 通过eventChannel向test.vue页面传送数据(参数)
res.eventChannel.emit('acceptDataFromOpenerPage', { data: '爱敲代码的婷婷婷' })
}
})
test页面代码:
// 在test.vue页面,向 A页面 通过事件传递数据(参数)相互传参
onLoad: function(option) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test页面的参数传递给A页面,在A页面的acceptDataFromOpenedPage事件内拿到'});
eventChannel.emit('someEvent', {data: '同上,我是test页面传过来的,在A页面中someEvent事件内拿到'});
// 监听acceptDataFromOpenerPage事件,获取A页面通过eventChannel传送到当前页面的数据(参数)
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
以上便是uniapp页面相互传参的方式,现在博主将传参应用到实际项目里面,通过点击事件进行页面互相传参,如下:
注意:我这里做逻辑判断是因为 在我的项目中有多个不同的页面都需要跳转到右边页面,主要是为了区分当前参数是不是左边页面传过来的(你要根据你的业务逻辑来决定是否需要进行判断)
这里还有一个误区,就是this的指向需要注意,由于我的语法用的是vue2,所以会牵扯到this引发的问题。如上图所示,我想在当前页面的uni.navigateTo的事件里面拿到右边页面传过来的参数给我当前页面里的data数据赋值,我刚开始直接使用了this,发现一直没赋值上去,后来发现是this指向不对,因为我这里用的不是箭头函数,所以它的this并没有指向外层,而是指向了函数本身,所以我们需要提前把this保存了,然后再进行赋值
左边页面的代码:
//这是我的点击事件
toAddress(){
//这里一定要保存好this,否则页面数据无法修改
const that =this
uni.navigateTo({
url: '/pages/address/address?selectAddress=true',
events: {
// 为指定事件添加一个监听器,获取右边页面传送到当前页面的数据
selectAddress: function(data) {
console.log(data)
// 拿到右边页面传递过来的值并赋值
that.addressInfo =data
},
},
})
},
右边页面的代码:
onLoad(option) {
// option拿到左边页面传递过来的参数
console.log(option)
// 这里是我的逻辑判断
this.selectAddress= (option.selectAddress==='true')
},
methods: {
/**
* 选择地址
* @param item 地址信息
*/
selectItem(item) {
if (this.selectAddress) {
// 向左边页面传递参数
this.getOpenerEventChannel().emit('selectAddress', item);
//并返回到左边页面
uni.navigateBack({});
}
},
}