uniapp的vue3写法 父页面点击跳转至子页面的时候如何在跳转中将父页面请求的数据传递给子页面 然后子页面如何接受该数据
时间: 2024-03-27 17:37:16 浏览: 101
如何在Vue的父子组件之间传递数据和调用方法
在uni-app中使用vue3,可以使用vue-router进行页面的跳转。要将父页面请求的数据传递给子页面,可以在路由跳转时通过路由参数传递数据。例如:
在父页面中:
```javascript
// 点击跳转事件
navigateToChildPage() {
let data = { // 父页面请求的数据
name: '张三',
age: 18
}
uni.navigateTo({
url: '/pages/child/child?id=1&data=' + JSON.stringify(data) // 通过路由参数传递数据
})
}
```
在子页面中:
```javascript
export default {
mounted() {
let id = this.$route.query.id // 获取路由参数中的id
let data = JSON.parse(this.$route.query.data) // 获取路由参数中的数据,并转成对象
console.log(id) // 输出:1
console.log(data) // 输出:{name: "张三", age: 18}
}
}
```
在子页面中,可以通过 `$route.query` 获取路由参数中的数据。在上述代码中,通过 `JSON.stringify()` 将父页面请求的数据转成字符串后,通过路由参数传递给了子页面。在子页面中,通过 `JSON.parse()` 将字符串转成对象。
阅读全文