uniApp页面通讯

news2024/12/25 23:44:27

Uniapp 是一款基于 Vue.js 开发的框架,它可以用来开发多端应用,包括微信小程序、H5、APP 等。在 Uniapp 中,页面通讯分为三种方式:事件总线、Vuex 和 uni.$emit。

  1. 事件总线(EventBus):事件总线是一种非常方便的通讯方式,它可以在多个组件之间传递数据。事件总线在 Vue 中是通过 $emit 和 $on 方法进行绑定和监听的。在 Uniapp 中,可以使用 uni.$emit 和 uni.$on 方法来实现事件总线。

  2. Vuex:Vuex 是一种专门为 Vue.js 开发的状态管理库,它可以将需要共享的数据集中存储,以便于在多个组件中共享。在 Uniapp 中,可以使用 Vuex 来进行页面通讯。

  3. uni.$emit:与事件总线类似,uni.$emit 也可以用来实现页面之间的通讯。它也是通过 $emit 和 $on 方法进行绑定和监听的,不过它是全局对象 uni 上的方法,可以在任何页面中调用。


以下是一个简单的示例,演示如何使用 Uniapp 实现页面之间的通讯:

在页面 A 中,我们定义了一个事件,并在事件中传递了一个参数:

// A 页面
export default {
  methods: {
    handleClick() {
      const data = { name: 'Tom', age: 20 }
      uni.$emit('myEvent', data)
    }
  }
}

在页面 B 中,我们通过监听事件的方式来获取页面 A 传递过来的参数:

// B 页面
export default {
  mounted() {
    uni.$on('myEvent', data => {
      console.log(data) // => { name: 'Tom', age: 20 }
    })
  }
}

这样,当我们在页面 A 中点击按钮触发事件时,页面 B 就会接收到传递的参数并进行处理。需要注意的是,在使用事件总线时,需要在组件销毁时移除监听,避免内存泄漏:

destroyed() {
  uni.$off('myEvent')
}

以上是一个简单的示例,演示了 Uniapp 中使用事件总线实现页面通讯的方法。实际应用中,我们可能需要使用 Vuex 或其他方式来进行更复杂的页面通讯需求。

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

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

相关文章

挖掘非结构化数据潜能——向量数据库的探索之路

“ 摸着石头过河,一直向前,不断尝试 ” 整理 | 小白 出品|极新 IDC 预测,到 2025 年,中国的数据量将增长到 48.6ZB,80% 是非结构化数据,并且将成为全球最大的数据圈。在我们的日常生活中&…

rancher或者其他容器平台使用非root用户启动jar

场景: java程序打成镜像,在rancher上运行,默认是root账户,发现hdfs或者hive不允许root账户操作;所以打算用费root账户启动jar,使其具有hive和hdfs的操作权限。 Dockerfile entrypoint.sh 思路就是上面这样…

git and svn 行尾风格配置强制为lf

git CLI配置: // 提交时转换为LF,检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF,检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…

C# wpf 实现任意控件(包括窗口)更多拖动功能

系列文章目录 第一章 Grid内控件拖动 第二章 Canvas内控件拖动 第三章 任意控件拖动 第四章 窗口拖动 第五章 附加属性实现任意拖动 第六章 拓展更多拖动功能(本章) 文章目录 系列文章目录前言一、添加的功能1、任意控件MoveTo2、任意控件DragMove3、边…

19 款Agent产品工具合集

原文:19 款Agent产品工具合集 什么是Agent? 你告诉GPT完成一项任务,它就会完成一项任务。 如果你不想为GPT提出所有任务怎么办?如果你想让GPT自己思考怎么办? 想象一下,你创建了一个AI,你可以给它一个…

第一章:IDEA

系列文章目录 文章目录 系列文章目录前言一、IDEA 的使用1.1 IDEA 工作界面1.2 IDEA 的基本介绍和使用1.3 IDEA 使用技巧和经验1.4 IDEA编译与源文件1.5 IDEA 常用快捷键1.6 IDEA模板/自定义模板 总结 前言 IDEA 全称 IntelliJ IDEA,在业界被公认为最好的 Java 开发…

C++进阶-模板

模板 模板的概念函数模板函数模板语法函数模板注意事项案例-实现数据的排序函数模板与普通函数的区别普通函数与函数模板的调用规则 模板的局限性类模板的基本语法类模板与函数模板的区别类模板中成员函数创建时机类模板对象做函数参数类模板与继承类模板成员函数类外实现类模板…

模拟量指令

这里写自定义目录标题 模拟量scale指令导入模拟量输入原理硬件组态 指令运用信号发生器使用S_ITR(integer to real) 整数转换浮点数 模拟量输入信号输出信号标准信号非标准信号RTD(Resistance Temperature Detector,热电阻)实物图接线方法 TC…

顶板事故防治vr实景交互体验提高操作人员安全防护技能水平

建筑业在我国各行业中属危险性较大且事故多发的行业,在建筑业“八大伤害”(高处坠落、坍塌、物体打击、触电、起重伤害、机械伤害、火灾爆炸及其他伤害)事故中,高处坠落事故的发生率最高、危险性极大。工地现场培训vr坠落体验利用虚拟现实技术还原各种情…

数据结构(c语言版) 栈

顺序栈 要求&#xff1a;实现顺序栈的入栈&#xff0c;出栈&#xff0c;显示栈 代码 #include <stdio.h> #define MAXSIZE 100struct liststack{int data[MAXSIZE];int top; };//初始化栈 void init(struct liststack * LS){LS->top -1; }//入栈操作 void instack…

小程序制作(超详解!!!)第十四节 计时器

1.案例描述 设计一个实现倒计时功能的小程序&#xff0c;小程序运行后&#xff0c;首先显示空白界面&#xff0c;过2秒后才显示计时界面点击“开始计时”按钮后开始倒计时&#xff0c;点击“停止计时”按钮后停止计时。 2.index.wxml <view class"box" hidden&…

Docker安装、卸载,以及各种操作

docker是一个软件&#xff0c;是一个运行与linux和windows上的软件&#xff0c;用于创建、管理和编排容器&#xff1b;docker平台就是一个软件集装箱化平台&#xff0c;是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xf…

服务器数据恢复—云服务器mysql数据库表被truncate的数据恢复案例

云服务器数据恢复环境&#xff1a; 阿里云ECS网站服务器&#xff0c;linux操作系统mysql数据库。 云服务器故障&#xff1a; 在执行数据库版本更新测试时&#xff0c;在生产库误执行了本来应该在测试库执行的sql脚本&#xff0c;导致生产库部分表被truncate&#xff0c;还有部…

【达梦数据库】mysql与达梦整数类型对比关系

最近遇了mysql 和达梦整数类型的数据范围对比&#xff0c;做了个表格供大家分享 对比表格 要说明的是我整理的时候&#xff0c;达梦貌似没有无符号整数类型&#xff08;防杠保护&#xff09;&#xff0c;也就是只能将mysql/dm 的有符号整数类型的的范围值进行对比 MYSQL - t…

C#开源项目:私有化部署LLama推理大模型

推荐一个C#大模型推理开源项目&#xff0c;让你轻松驾驭私有化部署&#xff01; 01 项目简介 LLama是Meta发布的一个免费开源的大模型&#xff0c;是一个有着上百亿数量级参数的大语言模型&#xff0c;支持CPU和GPU两种方式。 而LLamaSharp就是针对llama.cpp封装的C#版本&am…

【数学】 4、向量的内积、外积、模长

文章目录 一、向量点乘&#xff08;内积&#xff09;1.1 几何意义1.2 点乘的代数定义&#xff0c;推导几何定义&#xff08;用于求向量夹角&#xff09;1.2.1 余弦定理 1.3 程序计算 二、向量叉乘&#xff08;外积&#xff09;2.1 几何意义 三、通俗理解内积和外积四、向量的模…

kubernetes集群编排——k8s调度

nodename vim nodename.yaml apiVersion: v1 kind: Pod metadata:name: nginxlabels:app: nginxspec:containers:- name: nginximage: nginxnodeName: k8s2 nodeName: k8s2 #找不到节点pod会出现pending&#xff0c;优先级最高 kubectl apply -f nodename.yamlkubectl get pod …

AI系统ChatGPT程序源码+AI绘画系统源码+支持GPT4.0+Midjourney绘画+已支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

VMware创建Linux虚拟机之(三)Hadoop安装与配置及搭建集群

Hello&#xff0c;world&#xff01; &#x1f412;本篇博客使用到的工具有&#xff1a;VMware16 &#xff0c;Xftp7 若不熟悉操作命令&#xff0c;推荐使用带GUI页面的CentOS7虚拟机 我将使用带GUI页面的虚拟机演示 虚拟机&#xff08;Virtual Machine&#xff09; 指通过…

2023年【安全员-A证】最新解析及安全员-A证在线考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-A证最新解析是安全生产模拟考试一点通生成的&#xff0c;安全员-A证证模拟考试题库是根据安全员-A证最新版教材汇编出安全员-A证仿真模拟考试。2023年【安全员-A证】最新解析及安全员-A证在线考试 1、【多选题…