使用uniapp框架,点击列表中的一条item,并将此item的数据传到另一个vue里
时间: 2024-02-15 12:02:27 浏览: 68
wx300宠物小程序-ssm+vue+uniapp.zip(可运行源码+sql文件+)
可以通过路由传参的方式将点击的item的数据传递到另一个vue里。具体实现过程如下:
1. 在点击item时,触发一个方法,并将该item的数据作为参数传递给这个方法:
```html
<!-- item.vue -->
<template>
<div @click="handleClick(itemData)">...</div>
</template>
<script>
export default {
props: {
itemData: {
type: Object,
required: true
}
},
methods: {
handleClick(data) {
// 跳转到目标页面,并将数据作为参数传递
uni.navigateTo({
url: '/pages/targetPage/targetPage?data=' + JSON.stringify(data)
});
}
}
};
</script>
```
2. 在目标页面中,通过`onLoad`生命周期函数获取路由传递的参数,并将参数保存到data中:
```html
<!-- targetPage.vue -->
<script>
export default {
data() {
return {
itemData: null
};
},
onLoad(options) {
// 获取路由传递的参数,并将参数保存到data中
this.itemData = JSON.parse(options.data);
}
};
</script>
```
这样,点击item时,就会跳转到目标页面,并将该item的数据作为参数传递给目标页面。在目标页面中,可以通过`this.itemData`获取到传递过来的数据。
阅读全文