vue3+vite+ts——uniapp的项目中,跳转时uni.navigateTo通过eventChannel向被打开页面传送数据,被打开的页面要如何接收
时间: 2024-02-24 13:54:13 浏览: 72
在被打开的页面中,我们可以使用 `getCurrentPages()` 方法获取当前页面栈的实例,然后通过 `eventChannel.on()` 方法监听从上一个页面传递过来的数据。具体实现步骤如下:
1. 在打开页面的页面中,创建一个 `eventChannel` 对象,并使用 `uni.navigateTo()` 方法打开被打开的页面,并将 `eventChannel` 对象传递给被打开的页面:
```typescript
import { defineComponent } from 'vue'
export default defineComponent({
methods: {
navigateTo() {
const eventChannel = this.$mp.page.getOpenerEventChannel()
uni.navigateTo({
url: '/pages/secondPage/secondPage',
events: {
// 传递数据
passData: (data: any) => {
console.log('receive data', data)
}
},
success: () => {
// 向被打开的页面传递 eventChannel 对象
eventChannel.emit('passEventChannel', eventChannel)
}
})
}
}
})
```
2. 在被打开的页面中,可以在 `onLoad()` 生命周期函数中接收 `eventChannel` 对象,并使用 `eventChannel.on()` 方法监听从上一个页面传递过来的数据:
```typescript
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
setup() {
const data = ref('')
onMounted(() => {
const eventChannel = new UniApp.EventChannel()
// 接收从上一个页面传递过来的 eventChannel 对象
uni.on('passEventChannel', (res: any) => {
res.eventChannel.on('passData', (data: any) => {
console.log('receive data', data)
// 更新数据
data.value = data
})
})
})
return {
data
}
}
})
```
这样在被打开的页面中就可以接收到从上一个页面传递过来的数据了。需要注意的是,在使用 `eventChannel.on()` 方法监听数据时,需要传入一个事件名,这个事件名需要与打开页面时传入的 `events` 对象中的事件名保持一致。
阅读全文