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; 通过自动化的数据收集…

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

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

代码随想录打卡第39天:单调栈

1.单调栈 1.什么是单调栈&#xff1f; 单调栈的本质是空间换时间&#xff0c;因为在遍历的过程中需要用一个栈来记录右边第一个比当前元素高的元素&#xff0c;优点是整个数组只需要遍历一次。 2.单调栈一般解决什么问题&#xff1f; 通常是一维数组&#xff0c;要寻找任一…

吴恩达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;那么教学就会失去方向。不断学习更新自己…

Markdown 语法详解

Markdown 语法详解 Markdown 是一种轻量级标记语言&#xff0c;可以通过简单的标记符号来格式化文本。以下是详细的 Markdown 语法说明以及对应的使用示例。 标题 Markdown 使用 # 号来表示标题&#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;实时监测骑自…

7-Zip是什么呢

1. 简介 7-Zip 是一个功能强大、免费开源的文件压缩和解压缩工具&#xff0c;适用于个人用户和企业用户&#xff0c;可以在多种操作系统上进行使用&#xff0c;并且支持广泛的压缩格式和高级功能。 2. 特点与优势 开源免费&#xff1a;7-Zip 是免费的开源软件&#xff0c;可…

transformer的特点

Transformers是一种用于处理序列数据的神经网络架构&#xff0c;最初由Vaswani等人在2017年提出&#xff0c;主要用于自然语言处理任务。与传统的循环神经网络&#xff08;RNN&#xff09;和卷积神经网络&#xff08;CNN&#xff09;不同&#xff0c;Transformers采用了一种全新…

装机数台,依旧还会心念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;…

PbootCMS后台用户账号密码时进行重置工具

1、工具作用: 工具用于忘记PbootCMS后台用户账号密码时进行重置。 2、下载地址&#xff1a;https://pan.quark.cn/s/2b017974f2c0 3、使用方法&#xff1a; 1&#xff09;下载重置工具解压包&#xff0c;解压后将resetpw.php文件直接上传到网站根目录下&#xff1b; 2&…