uniapp中a页面跳转到b页面并把对象传给b页面,b页面接收到值后通过点击事件回到a页面并把接收到的值传回去
时间: 2024-03-24 07:38:52 浏览: 65
Web前端页面跳转并取到值
5星 · 资源好评率100%
好的,这个问题涉及到 uniapp 中页面之间的传值和页面跳转,可以通过以下步骤实现:
1. 在 a 页面中,定义一个对象存储要传递的值,例如:
```
let myObject = {
name: 'Jack',
age: 20
};
```
2. 在 a 页面中,使用 uniapp 的 `uni.navigateTo()` 方法跳转到 b 页面,并把对象作为参数传递给 b 页面,例如:
```
uni.navigateTo({
url: 'b/b?myObject=' + JSON.stringify(myObject)
});
```
3. 在 b 页面中,通过 uniapp 的 `this.$route.query` 获取 URL 参数中的对象,并存储到一个变量中,例如:
```
let receivedObject = JSON.parse(this.$route.query.myObject);
```
4. 在 b 页面中,定义一个点击事件,在点击事件中使用 uniapp 的 `uni.navigateBack()` 方法跳转回 a 页面,并把接收到的值作为参数传递回去,例如:
```
document.getElementById('back-btn').addEventListener('click', function() {
uni.navigateBack({
delta: 1,
success: function() {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 1];
prevPage.$vm.$emit('getObject', receivedObject);
}
});
});
```
5. 在 a 页面中,通过 uniapp 的 `$on` 监听 b 页面传递回来的值,并存储到一个变量中,例如:
```
export default {
data() {
return {
returnedObject: {}
}
},
mounted() {
this.$on('getObject', function(object) {
this.returnedObject = object;
});
}
}
```
注意:需要在 a 页面的 `mounted` 钩子函数中使用 `$on` 监听 b 页面传递回来的值,并在 b 页面跳转回 a 页面时触发 `getObject` 事件。
阅读全文