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

本文主要是介绍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

<template><button @click="fn1">按钮1</button><button @click="fn2">按钮2</button>
</template><script setup lang='ts'>
import { 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', () => {// 监听后的逻辑})
}</script><style lang="scss" scoped></style>

页面B

<template><my-header>点击可返回</my-header><camera device-position="back" flash="off" style="width: 100%; height: 300px;"></camera><button type="primary" @click="takePhoto">拍照</button>
</template><script setup lang='ts'>
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()})
})
</script><style lang="scss" scoped></style>