uniapp组件通讯

1、父组件跳转页面时通过eventChannel设置监听事件:

// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

2、子组件接收父组件路径参数和eventChannel函数并且调用父组件事件传递数据:

// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

3、调用父组件函数需要把当前页面函数映射到监听事件中:

// 当前页面的Vue实例
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    // 接收从被打开页面发送的数据
    acceptDataFromOpenedPage(data) {
      console.log('Received data:', data);
      this.message = data; // 假设我们想要更新当前页面的数据
    }
  },
  // 导航到新页面,并设置事件监听器
  navigateToPage() {
    uni.navigateTo({
      url: '/pages/test?id=1',
      events: {
        // 使用当前页面的实例方法作为监听器
        acceptDataFromOpenedPage: this.acceptDataFromOpenedPage
      },
      success: function(res) {
        console.log('navigateTo success', res);
      },
      fail: function(err) {
        console.error('navigateTo fail', err);
      }
    });
  }
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发数字药店APP实战:互联网医院系统源码详解

本篇文章,笔者将深入探讨如何开发一个功能完善的数字药店APP,并详细解析互联网医院系统的源码实现。 一、数字药店APP的需求分析 应具备以下基本功能: 用户注册与登录 药品搜索与浏览 在线下单与支付 订单管理 健康咨询与远程医疗 个人…

人脉社群平台微信小程序系统源码

🌟【解锁人脉新纪元:探索人脉社群平台小程序】🌟 🚀【开篇:为什么我们需要人脉社群平台小程序?】🚀 在这个快节奏的时代,人脉不再是简单的名片交换,而是通往成功与机遇…

发电机保护屏的作用及其重要性

发电机保护屏的作用及其重要性 发电机保护屏是电力系统中的重要组成部分,它负责监测和控制发电机的运行状态,确保发电机在正常运行和故障情况下都能得到及时、准确的保护。负责监测和控制发电机运行状态,确保及时准确的保护。它由显示屏、控制…

Nacos 2.x 系列【18】多网卡 IP 配置

文章目录 1. 前言2. 服务端3. 客户端 1. 前言 个人电脑或者服务器,存在多网卡环境时,Nacos 可能会存在IP不正确问题。 2. 服务端 Nacos 服务在启动的时候需要选择运行时使用的IP或者网卡,在启动时,可以看到打印了IP&#xff1a…

2024年【四川省安全员A证】试题及解析及四川省安全员A证模拟考试

题库来源:安全生产模拟考试一点通公众号小程序 四川省安全员A证试题及解析根据新四川省安全员A证考试大纲要求,安全生产模拟考试一点通将四川省安全员A证模拟考试试题进行汇编,组成一套四川省安全员A证全真模拟考试试题,学员可通…

如何在 Odoo 16 中将按钮添加到所有表单视图的操作按钮

在 Odoo 中,操作按钮是关键组件,允许用户触发与特定表单视图相关的特定操作或工作流。这些按钮策略性地放置在用户界面中,可简化操作并提高用户效率。它们可以自定义以执行各种任务,例如创建记录、更新信息或启动特定流程。 操作…

万界星空科技服装行业MES系统解决方案

据调查,我国大多数服装厂目前存在两大问题: 第一,是生产设备先进,但管理模式落后,仍采用手工管理模式,未实现信息化; 第二,仍有大量的人工站,短时间内难以用设备代替&a…

如何查看xpf文件

xpf文件是什么 XPF文件是“XML Paper Specification File”的缩写,它是一种文件保存格式,具有以下特点和相关信息: 一、定义与用途 定义:XPF文件用于保留文档的固定布局,包括文本、图片以及其他文档元素的确切位置。…

软件工程实验

实验环境和需求 用户可以对相片进行按类别管理,用户可以设定不同的类别,然后上传照片到相应的类别中,并能进行照片的删除,注释 运行 运行并访问 localhost 8090,图片在数据库中的信息是D:/upgrade 后面的内容 se…

Emacs之解决:java-mode占用C-c C-c问题(一百四十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

一招解决 | IP地址访问怎么实现https

没有域名的情况下,使用IP地址实现HTTPS访问是可以的,但相比使用域名会有些许限制,需要通过部署专用于IP地址的SSL/TLS证书来实现。 IP地址实现HTTPS访问的过程与使用域名类似,但有几个关键的区别。以下是使用IP地址实现HTTPS访问…

day62--若依框架(基础应用篇)

若依搭建 若依版本 官方 若依官方针对不同开发需求提供了多个版本的框架,每个版本都有其独特的特点和适用场景: 前后端混合版本:RuoYi结合了SpringBoot和Bootstrap的前端开发框架,适合快速构建传统的Web应用程序,其…

java周测总结(3)

1、什么是I0流? 是一串流动的字符,从先进先出的方式要求信息的通道。 2、什么是序列化?什么是反序列化? 序例化是将对象的状态存储到特定的存储介质中的过程反序例化是将特定的有合者公质中数据重新构建对象的过程。 3、Java中线程在哪个包下…

第57期|GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区,集成了生成预训练Transformer(GPT)、人工智能生成内容(AIGC)以及大语言模型(LLM)等安全领域应用的知识。在这里,您可以找…

海思NNIE部署yolov5-shufflenet

1.简要说明 由于NNIE上transpose支持的顺序是固定的,shufflenet那种x=torch.transpose(x,1,2).contiguous() 的操作一般是不支持的。需要进行调整。 2.使用工程以及修改 使用的是开源工程:GitHub - Lufei-github/shufflev2-yolov5: shufflev2-yolov5:lighter, faster and ea…

vue根据文字长短展示跑马灯效果

介绍 为大家介绍一个我编写的vue组件 auto-marquee ,他可以根据要展示文本是否超出展示区域,来判断是否使用跑马灯效果,效果图如下所示 假设要展示区域的宽度为500px,当要展示文本的长度小于500px时,只会展示文本&…

maven 根据不同环境,走不同的实现(多种环境组合)

​ 原因: 线上程序同时支持人大金仓和mysql,且支持根据环境动态选择 java JCE 的实现方式前期已完成 springboot 从mysql 迁移人大金仓 -kingbase :https://blog.csdn.net/qq_26408545/article/details/137777602?spm1001.2014.3001.5502 …

[leetcode] n个骰子的点数

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<double> statisticsProbability(int num) {vector<double> dp(6, 1.0 / 6.0);for (int i 2; i < num; i) {vector<double> tmp(5 * i 1, 0);for (int j 0; j < dp.size()…