uniApp跨页面通讯$on、$emit、$once、$off使用场景及技巧

大部分场景实际上利用$once、$emit、$off配合使用即可，直接上代码

在页面B中，离开时必须要销毁$once(xxx),因为在B页面，点击拍照才会触发$emit(xxx),如果通过滑动或点击头部返回页面A,$once(xxx)将会和下一次$emit(xxx)调用时，一起触发。

所以调用销毁方法$off(xxx)的实际很重要，onUnmounted配合nextTick使用，刚好不会影响上个页面A正常通过takePhoto 触发的事件

页面A

（）

  按钮1  按钮2import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'const state = reactive({  list1: [] as string[],  list2: [] as string[]})const fn1 = () => {  uni.navigateTo({ url: '页面B'})  uni.$once('xxx', () => {    // 监听后的逻辑  })}const fn2 = () => {  uni.navigateTo({ url: '页面B'})  uni.$once('xxx', () => {    // 监听后的逻辑  })}

页面B

  点击可返回    拍照import { reactive, toRefs, nextTick, onUnmounted } from 'vue'const takePhoto = () => {  const ctx = uni.createCameraContext();  ctx.takePhoto({    quality: 'high',    success: (res) => {      uni.$emit('xxx', res)    }  })}onUnmounted(() => {  nextTick(() => {    uni.$off('xxx')    uni.navigateBack()  })})

（）