uni-app实现页面通信EventChannel

uni-app实现页面通信EventChannel

之前使用了EventBus的方法实现不同页面组件之间的一个通信,在uni-app中,我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注:2.8.9+ 支持页面间事件通信通道。

1. 向被打开页面传送数据

// index.vue
<script setup>uni.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().proxy<script setup>onLoad(()=>{const eventChannel = instance.getOpenerEventChannel();eventChannel.on('toDetailEmits',(data)=>{console.log(data,'data') // 输出结果如下})})
</script>

在这里插入图片描述

2. 如果需要获取被打开页面传送到当前页面的数据

// index.vue
<script setup>uni.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().proxy<script 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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript笔记二-JavaScript基础语法

1、标识符 命名规则 第一个字符必须是一个字母、下划线&#xff08; _ &#xff09;或一个美元符号&#xff08; $ &#xff09;。其它字符可以是字母、下划线、美元符号或数字。按照惯例&#xff0c;ECMAScript 标识符采用驼峰命名法。标识符不能是关键字和保留字符。 2、字…

2022年全国职业院校技能大赛高职组“信息安全管理与评估”赛项第三阶段任务书

第三阶段竞赛项目试题 本文件为信息安全管理与评估项目竞赛-第三阶段试题。根据信息安全管理与评估项目技术文件要求&#xff0c;第三阶段为夺旗挑战CTF&#xff08;网络安全渗透&#xff09;。 本次比赛时间为180分钟。 介绍 夺旗挑战赛&#xff08;CTF&#xff09;的目标…

开发语言Java+前端框架Vue+后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势?

开发语言Java前端框架Vue后端框架SpringBoot开发的ADR药物不良反应监测系统源码 系统有哪些优势&#xff1f; ADR药物不良反应监测系统具有多个显著的优势&#xff0c;这些优势主要体现在以下几个方面&#xff1a; 一、提高监测效率与准确性&#xff1a; 通过自动化的数据收集…

在热力图基础上寻找所有峰值位置

文章目录 概要代码概要 理解热力图:首先,了解热力图是什么以及它代表了什么信息至关重要。热力图通常是二维的,其中每个像素的颜色表示该位置的数值大小。较亮的颜色通常表示较高的数值,而较暗的颜色表示较低的数值。 阈值处理:根据问题的要求,可能需要对热力图进行阈值处…

吴恩达2022机器学习专项课程C2W2:实验SoftMax

目录 Softmax函数1.简述2.Numpy实现softmax函数 softmax成本函数softmax应用于神经网络1.自定义数据集2.构建模型3.使用模型预测4.改良模型代码&#xff08;softmax转换输出&#xff09; Softmax函数 1.简述 在 Softmax 回归和带有 Softmax 输出的神经网络中&#xff0c;模型…

小程序如何更换营业执照

​因为商家经营业务的变更&#xff0c;尤其是之前的营业执照注销等原因&#xff0c;导致要求更换小程序主体。下面就具体介绍如何进行变更。 1. 登录mp.weixin.qq.com&#xff0c;找到设置->基本设置&#xff0c;在主体信息字段&#xff0c;点击小程序主体变更。主体变更分…

【运维项目经历|015】:Nginx Web服务性能提升与优化项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的技术性问题 问题1&#xff1a;本次项目的人员配置&#xff1f; 问题2&#xff1a;本次项目的周期&am…

教学基本功包括什么技能有哪些

教师的工作不仅仅是传授知识&#xff0c;更多是引导学生探索&#xff0c;激发他们的创造力。要做到这一点&#xff0c;需要具备一些基本技能。 扎实的专业知识。这是教师的根基&#xff0c;如果教师自己对所教的科目都不熟悉&#xff0c;那么教学就会失去方向。不断学习更新自己…

基于python开发用于深度学习模型训练过程loss值曲线的平滑处理模块

深度学习网络模型的loss曲线是训练过程中非常重要的一个监控指标&#xff0c;它能够直观地反映模型的学习状态以及可能存在的问题。以下是对深度学习网络模型loss曲线的详细介绍&#xff1a; 一、loss曲线的基本概念 在深度学习的训练过程中&#xff0c;loss函数用于衡量模型…

0521_网络编程5

练习1&#xff1a; TFTP通信过程总结 服务器在69号端口等待客户端的请求服务器若批准此请求&#xff0c;则使用 临时端口 与客户端进行通信。每个数据包的编号都有变化&#xff08;从1开始&#xff09;每个数据包都要得到ACK的确认&#xff0c;如果出现超时&#xff0c;则需要…

骑车不戴头盔监测摄像机

骑行是一种健康的出行方式&#xff0c;但是在骑行途中不戴头盔存在安全隐患&#xff0c;容易造成头部受伤。为了规范骑行行为&#xff0c;保障骑行安全&#xff0c;可以考虑使用骑车不戴头盔监测摄像机进行监测和识别。这种摄像机可以通过智能识别技术&#xff0c;实时监测骑自…

装机数台,依旧还会心念i5-12600KF的性能和性价比优势:

近几个月的时间中&#xff0c; 装机差不多4台电脑&#xff0c;由于工作需要&#xff0c;计划年中再增添一台。 目前市场上英特尔CPU促销非常火爆&#xff0c;第12代、第13代以及第14代的产品在年中有适当的优惠。 年中也是装机的旺季&#xff0c;各种相关配件也相对便宜一些。…

PS系统教学02

多个图片同时进行打开 在素材库里面选中两张图片&#xff0c;直接拖进PS软件中&#xff0c;此时会显示其中一张。当按下回车键会显示另一张。 当图层过多&#xff0c;需要进行选择&#xff0c;其中某一张图片&#xff0c;按住Ctrl键&#xff0c;进行选择点击&#xff0c;可以移…

制造企业如何通过PLM系统实现BOM管理的飞跃

摘要 在当今快速变化的制造行业中&#xff0c;产品生命周期管理&#xff08;PLM&#xff09;系统的应用已成为企业提升效率、降低成本和增强竞争力的关键。本文将探讨PLM系统如何通过其先进的BOM&#xff08;物料清单&#xff09;管理功能&#xff0c;帮助制造企业在整个产品生…

idea+tomcat+mysql 从零开始部署Javaweb项目(保姆级别)

文章目录 新建一个项目添加web支持配置tomcat优化tomcat的部署运行tomcatidea数据库连接java连接数据库 新建一个项目 new project&#xff1b;Java&#xff1b;选择jdk的版本&#xff1b;next&#xff1b;next&#xff1b;填写项目名字&#xff0c;选择保存的路径&#xff1b;…

【Linux 网络编程】协议的分层知识!

文章目录 1. 计算机网络背景2. 认识 "协议"3. 协议分层 1. 计算机网络背景 网络互联: 多台计算机连接在一起, 完成数据共享; &#x1f34e;局域网&#xff08;LAN----Local Area Network&#xff09;: 计算机数量更多了, 通过交换机和路由器连接。 &#x1f34e; 广…

基于 Arm 虚拟硬件的 TinyMaix 超轻量级神经网络推理框架的项目实践

本实验过程中所显示的优惠价格及费用报销等相关信息仅在【Arm AI 开发体验创造营】体验活动过程中有效&#xff0c;逾期无效&#xff0c;请根据实时价格自行购买和体验。同时&#xff0c;感谢本次体验活动 Arm 导师 Liliya 对于本实验手册的共创与指导。 详见活动地址&#xff…

Vue使用axios实现调用后端接口

准备后端接口 首先&#xff0c;我已经写好一个后端接口用来返回我的用户数据&#xff0c;并用Postman测试成功如下&#xff1a; 以我的接口为例&#xff0c;接口地址为&#xff1a;http://localhost:8080/user/selectAll 返回Json为&#xff1a; {"code": "2…

docker制作高版本jdk17镜像踩坑

1、创建目录并下载jdk上传到服务器中 从jdk官网下载jdk17镜像&#xff0c;提示&#xff1a;下载到本地用xftp上传到服务器&#xff08;速度会快点&#xff09; jdk官网&#xff1a;https://www.oracle.com/java/technologies/downloads/#graalvmjava21 创建目录&#xff0c;将…

Ubuntu系统编译内核——deb安装 / install安装

摘要 本文简要记录两种编译内核的方法&#xff1a; 打包成deb模块安装&#xff08;推荐&#xff09;&#xff1b;直接make install安装&#xff1b; 更推荐使用——打包成deb模块安装&#xff0c;因为可以方便的拷贝下次其他机器使用。 1. 编译环境准备 系统&#xff1a;lin…