uniapp父子页面互相传值
时间: 2023-08-05 19:05:33 浏览: 107
React父子组件间的传值的方法
在uni-app中,父子页面间传递数据可以通过以下几种方式实现:
1. 使用 `uni.navigateTo` 或 `uni.redirectTo` 方法跳转到子页面时,可以将数据作为URL参数传递。例如,在父页面中跳转到子页面时:
```
uni.navigateTo({
url: '/pages/child/child?id=123&name=abc'
});
```
在子页面中可以使用 `this.$route.query` 获取URL参数:
```
onLoad() {
const id = this.$route.query.id;
const name = this.$route.query.name;
}
```
2. 使用 `uni.navigateBack` 方法返回父页面时,可以通过 `uni.navigateBack` 的第二个参数传递数据。例如,在子页面中返回父页面时:
```
uni.navigateBack({
delta: 1,
success: () => {
const pages = getCurrentPages();
const parent = pages[pages.length - 2];
parent.setData({
message: 'Hello from child page'
});
}
});
```
在父页面中可以通过 `this.data.message` 获取传递的数据。
3. 如果父子页面之间需要频繁地传递数据,可以使用 `uni.$emit` 和 `uni.$on` 方法实现组件间通信。例如,在父页面中:
```
onMounted() {
uni.$on('child-page-message', (message) => {
console.log('Message from child page:', message);
});
}
```
在子页面中:
```
uni.$emit('child-page-message', 'Hello from child page');
```
父页面会监听名为 `child-page-message` 的事件,并在子页面触发该事件时获取传递的数据。
以上是uni-app中实现父子页面间数据传递的几种方式,你可以根据具体需求选择合适的方法。
阅读全文