【移动端】uniapp：实现页面间通讯

1. 使用路径参数实现页面通讯

使用该方式时，如果传输的数据较为复杂，不推荐使用，但如果需要传入的参数简单，推荐使用这种方式，他是内存开销最小的一种方式

源页面

源页面只需要在跳转的页面地址后面加上需要传输的参数即可

uni.navigateTo({
  	url: "/pages/OrderDetailInfo/index?a=1"
 });

目标页

目标页都是通过onLoad生命周期方法的参数，获取上一个页面传输过来的数据

Vue2、Vue 3 选项式

export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.a); //打印出上个页面传递的参数。
	}
}

Vue 3 组合式

onLoad((option)=> { //option为object类型，会序列化上个页面传递的参数
	console.log(option.a); //打印出上个页面传递的参数
})

2. EventChannel 页面间通讯

推荐使用这种方式：这种方式创建监听只在原页面和目标页面间作用，不在其他页面作用

源页面

uni.navigateTo({
  	url: "/pages/OrderDetailInfo/index",
    success: function (res) {
         res.eventChannel.emit("onOpenDetialInfo", props.info);
    }
 });

目标页

Vue 2、Vue3 选项式

在vue2 和vue3选项式中只需要在onLoad生命周期中通过预先注入到VueComponent实例中的getOpenerEventChannel方法获取监听器

export default {
//.......
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.on('onOpenDetialInfo', function(data) {
    console.log(data)
  })
}

}

Vue3 组合式

在vue3 组合式中，需要通过预置的getCurrentPages方法，获取到当前页面实例，再通过Page实例的$vm即可获取到getOpenerEventChannel监听器

onLoad((options) => {
    const pop = getCurrentPages().pop();
    pop.$vm.getOpenerEventChannel().on("onOpenDetialInfo", function (data) {
        orderInfo.value = data;
    });
});

3. 使用uni.$emit、 uni.$on 、 uni.$once 、uni.$off实现页面通讯

该方式不仅能实现页面通讯，还能实现跨组件间通讯，因为它是通过全局监听实现的，相当于vue的BUS插件 优点： 1. 可在任意地方使用$emit触发事件，耦合性较低 缺点： 1. 因为他的触发事件都是全局的，所以要求事件名称是不能重复的，相反提高了代码的耦合性 2. 需要在组件销毁时需要使用$off函数关闭监听器，避免持续监听，产生内存开销过大和错误的代码逻辑

源页面

uni.$emit('onOpenDetialInfo',data)

目标页

uni.$on('onOpenDetialInfo',(data)=>{
console.log(data)
})
uni.$once('onOpenDetialInfo',(data)=>{
console.log(data)
})
uni.$off('onOpenDetialInfo',()=>{
//关闭后执行
})