vue3+vite项目中,跳转时uni.navigateTo通过eventChannel向被打开页面传送数据,被打开的页面要如何接受
时间: 2024-02-24 16:53:55 浏览: 23
在被打开的页面中,可以通过uni.getCurrentPages()获取当前页面栈的实例,然后使用该实例的onLoad生命周期函数中的options参数来获取传递过来的数据。
具体代码如下:
```javascript
uni.getCurrentPages()[uni.getCurrentPages().length - 1].onLoad(function(options){
// options即为传递过来的参数
console.log(options)
})
```
另外,也可以在被打开的页面中使用on方法监听eventChannel事件,从而获取传递过来的数据。具体代码如下:
```javascript
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('eventName', data => {
console.log(data)
})
```
其中,eventName为在打开页面时通过eventChannel.emit方法发送事件时的事件名。
相关问题
vue3+vite+ts的项目中,跳转时uni.navigateTo通过eventChannel向被打开页面传送数据,被打开的页面要如何接收
在vue3+vite+ts的项目中,跳转时uni.navigateTo通过eventChannel向被打开页面传送数据,被打开的页面可以通过以下代码来接收传递过来的数据:
```typescript
import { defineComponent } from 'vue'
import { getCurrentInstance } from 'vue'
export default defineComponent({
setup() {
const instance = getCurrentInstance()
const route = instance?.appContext.config.globalProperties.$route
const eventChannel = route?.params?.eventChannel
eventChannel?.on('eventName', (data: any) => {
console.log(data)
})
return {
// ...
}
}
})
```
其中,getCurrentInstance()方法可以获取到当前组件实例,通过appContext.config.globalProperties.$route可以获取到当前路由信息,从而获取到eventChannel参数。
在on方法中,eventName为在打开页面时通过eventChannel.emit方法发送事件时的事件名,data为传递过来的数据。需要注意的是,由于ts的类型检查,需要对传递过来的数据进行类型声明。
vue3+vite+ts——uniapp的项目中,跳转时uni.navigateTo通过eventChannel向被打开页面传送数据,被打开的页面要如何接收
在被打开的页面中,我们可以使用 `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` 对象中的事件名保持一致。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)