Vue组件间通信的四种方式(函数回调,自定义事件,事件总线,消息订阅与发布)
目录
概述
props配置项-回调函数实现
自定义事件实现
事件总线实现
消息订阅与发布实现(pubsub-js库)
概述
在组件化编程中,组件间的通信是重要的,我们可以有四种方式实现组件间的通信。
分别是:函数回调,自定义事件,事件总线和消息订阅与发布。
props配置项-回调函数实现
需求:父组件(App.vue)给子组件(Student.vue)传递数据
父组件想要给子组件传递数据,只需要父组件在使用子组件的位置直接声明传递即可,子组件使用props配置项接收父组件传入的数据。
App组件(父组件)
<template><div id="app"><!--将data中的数据name传入Student子组件--><Studnet :name="name"></Studnet></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {name:"Tom"}},components: {Studnet}
}
</script>
Studnet组件(子组件)
<template><div><button @click="printAppData">点击</button></div>
</template><script>export default {name:"Student",// 子组件Student使用props配置项接收父组件传入的数据// 接收时注意需要加引号props:["name"],methods:{printAppData(){// 当点击事件触发后直接打印传入的数据console.log(this.name);}}}
</script>
当父组件传递给子组件数据后,像如上案例,传入的数据会存在子组件的data中,是响应式的。
测试 :当我们点击按钮后,查看控制台
子组件给父组件传递数据
我们在实现子组件给父组件传递数据的时候,要是还是想要使用props直接传递的话显然不合适。
因为props只能父组件在调用子组件时声明传递数据。
但是,虽然我们不能直接传递数据,但是我们可以换一个思路,那就是我们在父组件向子组件传递回调函数,当子组件在合适的时机调用传入的回调函数时可以设置函数参数,那么我们在父组件的函数实现就可以获取到调用函数时传入的参数数据。
App组件(父组件)
<template><div id="app"><!--传递回调函数getData--><Studnet :name="name" :getData="getData"/></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {name:"Tom"}},components: {Studnet},methods:{// 编写处理函数,可接受参数,当子组件调用并传入参数后在此可以接收到getData(age){console.log("获取到子组件的参数:",age);}}
}
</script>
Student组件(子组件)
<template><div><button @click="printAppData">点击(父向子组件传数据)</button><!--当点击的时候执行传入的回调函数并传入参数数据age给父组件的处理函数--><button @click="getData(age)">点击(子向父组件传数据)</button></div>
</template><script>export default {name:"Student",// 接收回调函数getDataprops:["name","getData"],data(){return{age:18}},methods:{printAppData(){console.log("接收到父组件传递的数据是:",this.name);},}}
</script><style></style>
总结 :
1.如上实现组件的通信主要就是依靠props传递,要是父组件想要给子组件传递数据,直接在模板中使用子组件时声明传递即可。
2.如果子组件想要给父组件传递数据,那么需要父组件传入代参的回调函数,当子组件想要给父组件传递数据时,就调用回调函数并且传参,父组件中的回调处理函数就可以接收到子组件调用时传入的参数了。
3.使用此方式通信有一定缺点,如果是多层的组件嵌套,那么需要使用props逐层传递才可以,并且不可以实现兄弟组件间的通信。
自定义事件实现
需求:子组件给父组件传递数据(使用自定义事件实现)
实现 :我们可以在父组件中给子组件绑定一个自定义事件,并且在父组件中编写事件处理函数,子组件在合适的时机执行此自定义事件的时候传递一些数据即可。触发方式类似于第一种方式,但是此方式省去了使用props传递和接收的步骤。
App组件(父组件)
<template><div id="app"><!-- 给Student组件(子组件)绑定一个myEvent自定义事件 --><Studnet @myEvent="myEvent"/></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {}},components: {Studnet},methods:{// 当自定义事件被子组件触发时,执行此函数获取触发事件时传入的参数myEvent(name){console.log("获取到子组件的参数:",name);}}
}
</script>
Student组件(子组件)
<template><div>// 声明一个点击事件做测试<button @click="clcikHandle">点击触发自定义事件</button></div>
</template><script>export default {name:"Student",// 接收回调函数data(){return{name:"Tom"}},methods:{// 当点击事件触发后,我们使用$emit触发自定义事件,并传入参数clcikHandle(){// 参数:$emit('自定义事件名称',传入的参数可以是多个,逗号分隔)this.$emit("myEvent",this.name)}}}
</script>
测试 :当我们点击按钮,控制台打印:
在其中我们给子组件绑定自定义事件还有另一种方式:
给子组件声明ref属性,这样就可以使用this.$refs获取到给节点(Student子组件)
<Studnet ref="studnetComp"/>
通过ref属性获取到节点,再给节点绑定事件即可,此方式更灵活
this.$refs.studnetComp.$on("自定义事件",处理函数)
解绑自定义事件
this.$off(["事件名称1","事件名称2"]) // 可以一次解绑多个自定义事件
事件总线实现
事件总线 :实现任意组件间的直接通信,上方的props传递回调函数或者是自定义事件的方式实现的组件通信都存在一些不足,当我们想要第一级组件和第三级组件间的通信时,就需要逐层传递,又或者是兄弟组件间通信是实现不了的,所以出现了事件总线的事件。
原理概述:其原理就是我们找出一个公共可访问区域,在此区域绑定自定义事件,当想要给某组件传递数据时,只需要执行该组件在公共区域放置的自定义事件并传递参数即可。
例如:A组件想要给B组件传递参数,那么我们就可以让B组件在公共区域绑定自定义事件并编写带参的事件处理函数,当A想要给B传递参数时,只需要在公共区域找到B组件声明的自定义组件使用$emit执行并传入参数即可,当执行了自定义事件,A组件的事件处理函数就会获得执行时传入的参数。
示例图解 :当我们B组件想要给A组件传递数据时,只需要A组件在公共区域绑定自定义事件,并书写事件处理函数接收参数,当B组件想传递数据的时候,找到A组件在公共区域绑定的自定义事件执行并传入参数,那么A组件中的事件处理函数将接收到传来的参数,那么我们就可以实现B组件给A组件传递数据了。
此公共区域可以为任意组件服务,实现任意组件的数据直接通信,所以我们称此公共区域叫做事件总线,因为它控制着所有组件的事件绑定。
公共位置是需要一些条件的,例如可以使用$emit,$on等方法,并且可以放置自定义事件。
其实就是在VUE原型对象上绑定,可以在VUE原型对象上绑定事件,并且可以使用原型上的方法,那么我们就只能考虑实例对象vc或vm当作我们的总线。
需求:兄弟组件间传递数据 (Student组件给Student1组件传递数据)
1.给Vue原型对象上添加$bus属性,值为vm (安装全局事件总线)
// 在mian.js中操作
new Vue({render: h => h(App),beforeCreate(){// 给Vue原型对象添加$bus属性,值为vm,当做我们的总线Vue.prototype.$bus = this}
}).$mount('#app')
2.Student1(数据接收方)组件在总线上绑定事件
export default {
name:Student1,
mounted(){// 当Vue挂载完毕给vc的$bus属性绑定自定义事件this.$bus.$on("myEvent",this.printInfo)
},
methods:{// 编写事件处理函数printInfo(args){// 当有组件执行自定义事件后就可以接收到参数console.log("获取到的参数为:",args);}
}
ps:其中至于此方式我们在Vue原型上声明的$bus属性,vc可以访问到的这个问题,其实是Vue更改了原型链指向。不了解可以看看这篇博客,有内存图解声明。
总之此方式就可让组件Student1在$bus上绑定自定义事件。
3.Studnet(数据提供方)组件在合适的时机执行studnet1在$bus上绑定的自定义事件并传入参数作为数据。
// 当点击页面上某个按钮时执行自定义事件并传入参数
clcikHandle(){// 执行$bus上的自定义事件myEvent并传入参数namethis.$bus.$emit("myEvent",this.name)
}
总结:此方式可以实现任意组件间的直接通信,并且在触发自定义事件时还可以再浏览器的Vue开发工具中捕获到一些信息。是比较推荐使用的组件通信方式实现。
消息订阅与发布实现(pubsub-js库)
此方式也可以实现任意组件间的通信,跟事件总线的实现方式很相似,就像是事件总线的封装版。
消息发布与订阅是一种思想
订阅者:需要数据的组件
发布者:提供数据的组件
概述:当订阅者想要获取数据,就要对外暴露订阅消息,指定订阅的消息名,当发布者想要给某个订阅者发送消息,就要找到订阅者订阅的消息名,就能够实现数据传递。
实现此思想的JS库有许多,在此使用pubsub-js做演示
使用步骤:
需求:Student组件给Student1组件传递数据
1.下载库pubsub-js
2.订阅消息(Studnet1组件-接收数据)
导入pubsub库
import pubsub from "pubsub-js"
// 发布订阅消息,当有对应消息名称发布时会传递数据进来
// 消息处理函数通过函数参数接收
pubsub.subscribe("消息名",消息处理函数)
3.发布消息(Studnet组件-提供数据)
导入pubsub库
import pubsub from "pubsub-js"
// 发布消息,对应的订阅了此消息名的函数会执行并且接收到此参数
pubsub.publish("消息名",参数)
总结:此方式跟事件总线的实现方式很像,其实两者的操作思路都是一样的,大致是:一方声明带参的事件事件处理函数,另一方执行并传入参数,但是事件总线的方式更值得推荐,因为不需要导入第三方库,并且在浏览器Vue管理工具能够捕获到触发的总线事件。
相关文章:

Vue组件间通信的四种方式(函数回调,自定义事件,事件总线,消息订阅与发布)
目录 概述 props配置项-回调函数实现 自定义事件实现 事件总线实现 消息订阅与发布实现(pubsub-js库) 概述 在组件化编程中,组件间的通信是重要的,我们可以有四种方式实现组件间的通信。 分别是:函数回调&…...
华为OD机试真题Python实现【求字符串中所有整数的最小和】真题+解题思路+代码(20222023)
求字符串中所有整数的最小和 题目 说明 字符串 s,只包含 a-z A-Z + - ;合法的整数包括 1) 正整数 一个或者多个0-9组成,如 0 2 3 002 102 2)负整数 负号 - 开头,数字部分由一个或者多个0-9组成,如 -0 -012 -23 -00023🔥🔥🔥🔥🔥👉👉👉👉👉👉 华…...

行为型设计模式之中介者模式
中介者模式 中介者模式又称为调解者模式或调停者模式,属于行为型模式。它用一个中介对象封装系列的对象交互,中介者使各对象不需要显示地相互作用,从而使其耦合松散,而且可以独立地改变它们之间的交互。 中介者模式包装了一系列对…...

JDK8增加的特性
Java知识点总结:想看的可以从这里进入 目录13、JDK8增加的特性13.1、Lambda表达式13.2、方法的引用13.3、时间处理类13.4、接口增加方法13.5、注解新增13.6、Optional类13.7、Stream13、JDK8增加的特性 13.1、Lambda表达式 Lambda表达式和方法的引用 13.2、方法的…...
华为OD机试 - 求数组中最大n个数和最小n个数的和(Python) | 机试题+算法思路+考点+代码解析 【2023】
求数组中最大n个数和最小n个数的和 给定一个数组,编写一个函数, 计算他的最大N个数和最小N个数的和, 需要对数组进行去重。 输入 第一行输入M,M表示数组大小 第二行输入M个数,表示数组内容 第三行输入N表示需要计算的最大最小N的个数 输出 输出最大N个数和最小N个数的…...

如何写出更加契合浙大MBA项目提面申请资料?
现在已经是2月中旬了,最近看到上海很多院校都已经公布了提前面批次相应时间了,等浙大复试工作结束,马上提前面批次时间也会出来。本人2023浙大提面也拿到了优秀,结合本人经验,今天给大家分享下申请材料该如何撰写&…...
华为OD机试真题Java实现【比赛评分】真题+解题思路+代码(20222023)
比赛评分 题目 一个有N个选手参加比赛,选手编号为1~N(3<=N<=100),有M(3<=M<=10)个评委对选手进行打分。打分规则为每个评委对选手打分,最高分10分,最低分1分。 请计算得分最多的3位选手的编号。如果得分相同,则得分高分值最多的选手排名靠前(10分数量相…...

【linux】——gcc/g++,make/makefile的简单使用
目录 1.gcc的基本使用 2.Linux下的静态库和动态库的理解 3.Linux项目自动化构建工具——make/makefile 1.gcc的基本使用 gcc是专门用来编译c语言的 g是专门用来编译c的,但是g也能够用来编译c语言 预处理(进行宏替换) 预处理功能主要包括宏…...

追梦之旅【数据结构篇】——详解C语言动态实现带头结点的双向循环链表结构
详解C语言动态实现带头结点的双向循环链表结构~😎前言🙌预备小知识💞链表的概念及结构🙌预备小知识💞链表的概念及结构🙌带头结点的双向循环链表结构🙌整体实现内容分析💞1.头文件编…...
华为OD机试真题Python实现【水仙花数 2】真题+解题思路+代码(20222023)
水仙花数 2 题目 给定非空字符串 s,将该字符串分割成一些子串 使每个子串的 ASCII 码值的和均为水仙花数 若分割不成功则返回 0若分割成功且分割结果不唯一 则返回-1若分割成功且分割结果唯一 则返回分割后子串的数目 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机…...

【原创】java+swing+txt学生学籍管理系统设计与实现
今天我们来介绍如何使用javaswingtxt来开发一个学籍管理系统。对的,你没看错,我们今天不用mysql,我们使用txt这个文本来进行数据存储,主要考察对文件读写的操作。 功能分析: 我们系统不要求做的很复杂,只…...

GCN项目实战1-SimGNN
文章目录SimGNN:快速图相似度计算的神经网络方法1. 数据2. 模型2.1 python文件功能介绍2.2 重要函数和类的实现SimGNN:快速图相似度计算的神经网络方法 原论文名称:SimGNN: A Neural Network Approach to Fast Graph Similarity Computation…...

经过深思熟虑后的接口测试自动化的总结与思考
序近期看到阿里云性能测试 PTS 接口测试开启免费公测,本着以和大家交流如何实现高效的接口测试为出发点,本文包含了我在接口测试领域的一些方法和心得,希望大家一起讨论和分享,内容包括但不仅限于:服务端接口测试介绍接…...

电脑自带的录屏放在哪里了?轻松弄懂,看这篇文章就明白了
有很多小伙伴有这个疑问,电脑自带的录屏放在哪里了?其实,电脑自带的录屏工具并不是所有电脑都要,具体要看你的电脑品牌和操作系统,Windows系统和Mac系统的电脑都自带了录屏工具,下面跟着小编一起来看看吧。…...
华为OD机试真题Java实现【字符串分割】真题+解题思路+代码(20222023)
字符串分割 给定一个非空字符串S,其被N个‘-’分隔成N+1的子串,给定正整数K,要求除第一个子串外,其余的子串每K个字符组成新的子串,并用‘-’分隔。对于新组成的每一个子串,如果它含有的小写字母比大写字母多,则将这个子串的所有大写字母转换为小写字母;反之,如果它含…...

【数据库】Apache Doris : 一个开源 MPP 数据库的架构与实践
文章目录Doris 背景介绍一、Doris二、Doris 定位适用场景 & 案例介绍一、适用场景二、具体案例Doris 整体架构一、Doris 整体架构二、Doris 数据分布三、Doris 的使用方式Doris 关键技术一、数据可靠性二、易运维三、MySQL 兼容性四、支持 MPPDoris 数据模型一、Doris 数据…...

day49【代码随想录】动态规划之最长公共子序列、不相交的线、最大子序和、判断子序列
文章目录前言一、最长公共子序列(力扣1143)二、不相交的线(力扣1035)三、最大子序和(力扣53)四、判断子序列(力扣392)前言 1、最长公共子序列 2、不相交的线 3、最大子序和 4、判断…...
华为OD机试真题Python实现【字母消消乐】真题+解题思路+代码(20222023)
字母消消乐 题目 游戏规则: 输入一个只包含英文字母的字符串, 字符串中的两个字母如果相邻且相同,就可以消除。 在字符串上反复执行消除的动作, 直到无法继续消除为止,此时游戏结束。 输出最终得到的字符串长度。 🔥🔥🔥🔥🔥👉👉👉👉👉👉 华为OD机试…...

程序中的日期使用问题-格式转化:SimpleDateFormat、org.apache.commons.lang3.time.DateUtils
前言 日期使用问题主要是格式转换的问题 场景:通过excel导入数据,其中一个字段为出生日期,需要对字段值进行合法性校验 博客地址:芒果橙的个人博客 【http://mangocheng.com】 一、个人浅谈日期 时间日期作为一个基础的标识和维度…...

C++——map和set的应用总结
目录1. 关联式容器2. 键值对3. 树形结构的关联式容器3.1 set3.1.1 set的介绍3.1.2 set的使用3.2 multiset3.2.1 multiset的介绍3.2.2 multiset的使用3.3 map3.3.1 map的介绍3.3.2 map的使用operator[]3.4 multimap3.4.1 multimap的介绍3.4.2 multimap的使用3.5 map和set在OJ中的…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...

Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...