当前位置：首页 > news >正文

uni-app实现页面通信EventChannel

news 2025/6/22 19:43:19

uni-app实现页面通信EventChannel

之前使用了EventBus的方法实现不同页面组件之间的一个通信，在uni-app中，我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注：2.8.9+ 支持页面间事件通信通道。

1. 向被打开页面传送数据

// index.vue
<script setup>uni.navigateTo({url: '/pages/tender/detail', // 跳转详情页面success:function(res){// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })}});
</script>

// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy<script setup>onLoad(()=>{const eventChannel = instance.getOpenerEventChannel();eventChannel.on('toDetailEmits',(data)=>{console.log(data,'data') // 输出结果如下})})
</script>

在这里插入图片描述

2. 如果需要获取被打开页面传送到当前页面的数据

// index.vue
<script setup>uni.navigateTo({url: '/pages/tender/detail', // 跳转详情页面events:{// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据updataEmits:function(data){console.log(data,'data index')  // 输出结果如下// 可以在当前页做一些操作....}},success:function(res){// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })}});
</script>

// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy<script setup>// 如点击某一按钮const cancle = () => {const eventChannel = instance.getOpenerEventChannel();eventChannel.emit('updataEmits',{data:'detail to index'})uni.navigateBack()}onLoad(()=>{const eventChannel = instance.getOpenerEventChannel();eventChannel.on('toDetailEmits',(data)=>{console.log(data,'data') })})
</script>