网站地图做法做,国内优秀网页网站设计,太原本地网站搭建公司,瑞安建设网站uni-app实现页面通信EventChannel
之前使用了EventBus的方法实现不同页面组件之间的一个通信#xff0c;在uni-app中#xff0c;我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注#xff1a;2.8.9 支持页面间事件通信通道。
1. 向被打开页面传送数据…uni-app实现页面通信EventChannel
之前使用了EventBus的方法实现不同页面组件之间的一个通信在uni-app中我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注2.8.9 支持页面间事件通信通道。
1. 向被打开页面传送数据
// index.vue
script setupuni.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().proxyscript setuponLoad((){const eventChannel instance.getOpenerEventChannel();eventChannel.on(toDetailEmits,(data){console.log(data,data) // 输出结果如下})})
/script2. 如果需要获取被打开页面传送到当前页面的数据
// index.vue
script setupuni.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().proxyscript 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
