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

2024-03-05 15:52

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

这篇关于uniApp跨页面通讯$on、$emit、$once、$off使用场景及技巧的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/777030

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.