uni-app实现页面通信EventChannel的操作方法
作者：幸福了，然后呢
使用了EventBus的方法实现不同页面组件之间的一个通信,在uni-app中,我们也可以使用uni-app API,uni.navigateTo来实现页面间的通信,这篇文章主要介绍了uni-app实现页面通信EventChannel的操作方法,需要的朋友可以参考下
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>
到此这篇关于uni-app实现页面通信EventChannel的操作方法的文章就介绍到这了,更多相关uni-app页面通信EventChannel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！