【vue】盘点Vue2和Vue3的10种组件通信方式：

最新推荐文章于 2024-05-06 18:46:12 发布
最新推荐文章于 2024-05-06 18:46:12 发布
阅读量479 收藏 2
点赞数
分类专栏： Vue框架 vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53791978/article/details/132629798
版权
Vue框架 同时被 2 个专栏收录
140 篇文章 11 订阅
订阅专栏
vue3
5 篇文章 0 订阅
订阅专栏

文章目录

一、介绍:

Vue中组件通信方式有很多，其中Vue2和Vue3实现起来也会有很多差异；本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。其中将要实现的通信方式如下表所示：

方式vue2vue3
父传子propsprops
子传父$emitemits
父传子$attrsattrs
子传父$listeners无(合并到 attrs方式)
父传子provideprovide
子传父injectinject
子组件访问父组件$parent无
父组件访问子组件$children无
父组件访问子组件$refexpose&ref
兄弟传值EventBusmitt
二、props

props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式

【1】选项式API

在这里插入图片描述

【2】组合式Api

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

三、emit

子组件可以通过emit发布一个事件并传递一些参数，父组件通过v-on进行这个事件的监听.

【1】选项式API

在这里插入图片描述

【2】组合式Api

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

四、attrs和listeners

子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

【1】选项式API

在这里插入图片描述

【2】组合式API

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

五、provide/inject

provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性
inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得

【1】选项式API

在这里插入图片描述

【2】组合式API

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

六、parent/children

$parent: 子组件获取父组件Vue实例，可以获取父组件的属性方法等
$children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不保证子组件的顺序

在这里插入图片描述

七、expose&ref

$refs可以直接获取元素属性，同时也可以直接获取子组件实例

【1】选项式API

在这里插入图片描述

【2】组合式API

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

八、EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。
在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

【1】选项式API

在这里插入图片描述

【2】组合式API

在这里插入图片描述

【3】setup语法糖

在这里插入图片描述

Sun Peng
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue2与vue3的使用区别与组件通信
09-12
本篇文章将深入探讨Vue2和Vue3在使用上的主要区别以及组件通信的方法。 ### Vue2与Vue3的区别 #### 1. Composition API Vue2 使用的是 Options API，所有组件选项如 data、methods、computed 等都直接在组件选项...
Vue3的7种和Vue2的12种组件通信
qq_43592064的博客
11-20 7245
Vue3的7种和Vue2的12种组件通信
Vue2和Vue3中组件间通信有哪⼏种⽅式
Poggie的博客
03-03 987
这是最基本的通信方式，父组件通过props向子组件传递数据，子组件通过$emit触发事件与父组件通信。props是单向数据流，只能由父组件传递给子组件，而且子组件无法修改这些数据。如果需要双向绑定，可以使用v-model指令，它实际上是语法糖，结合了props和$emit。
Vue3 的 7 种和 Vue2 的 12 种组件通信
2401_84091502的博客
05-06 707
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue常用组件通信方式及vue2和vue3写法对比
~~~
05-19 1580
本文结合vue2和vue3写法对比，总结了vue中组件通信常用的几种方式。父子组件：props / $emit、 ref / $parent隔代组件：provide / inject、eventBus、Vuex / Pinia兄弟组件：eventBus、Vuex / Pinia写作不易，你的一赞一评，就是我前行的最大动力。如有问题，欢迎指出！
vue 2 和 vue3 组件的五种通讯方式
qq_25529689的博客
10-24 1077
vue2 vue3 5种通讯方式总结。
vue2组件通信----ref
weixin_70024734的博客
07-10 217
【代码】vue2组件通信----ref。
vue2和vue3中是如何进行组件通信
前端-尔嵘
03-29 818
这些通信方式在Vue2和Vue3中都是可用的，但是Vue3中对于一些API进行了改进或者优化，例如提高了Teleport的性能和灵活性，同时提供了更丰富的响应式能力等等。2.$emit 和 on：通过on：通过emit方法在子组件中触发自定义事件，并在父组件中监听该事件使用$on方法来实现组件之间的通信。5.Teleport：Teleport允许我们在父组件中渲染内容到子组件的DOM元素中，从而实现在不同层级之间的组件通信。在子组件中，使用teleport函数指定要渲染到哪个目标元素上。
vue-全局事件总线mitt库（父子通信，兄弟通信都可，兼容vue2、vue3）
low666的博客
11-29 945
【代码】vue-全局事件总线mitt库（父子通信，兄弟通信都可，兼容vue2、vue3）
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
本文将总结 Vue3 中的七种组件通信方式，帮助开发者更好地理解和应用这些技术。 一、Props 方式 Props 是 Vue 中最常见的一种父传子的一种方式。使用 Props，可以将父组件的数据传递给子组件。在上面的 demo 中，...
基于Vue的百度地图mapvgl组件vue2和vue3设计源码
最新发布
05-23
mapvgl是一个基于Vue开发的百度地图mapvgl组件项目，包含137个文件，其中包括47个Markdown文件、29个JavaScript文件、29个Vue文件、7个PNG图片文件、6个HDR图片文件、3个JSON文件、3个GLTF文件、2个ICO图标文件、1个...
Vue组件通信的四种方式汇总
08-28
Vue.js 是一款流行的前端...选择哪种通信方式取决于组件间的关系和数据的需求，如简单父子数据传递、跨组件通信、持久化数据存储或大规模状态管理。理解并灵活运用这些通信方式，能够帮助开发者更高效地构建Vue应用。
细说vue2与vue3的区别
hjj521314741的博客
09-11 467
子传父：父组件中定义一个自定义函数，子组件通过setup中的第二个参数 如 （setup(props,_this)）里面的_this.emit方法进行父组件自定义函数的调用。父传子：父组件通过:属性名=值的方式将数据传给子组件，子组件通过props 属性进行接收，在setup方法中定义第一个形参props 如（setup(props)）,子传父：父组件中定义一个自定义函数，子组件通过this.$emit方法进行调用， 以形参的形式来改变父组件的数据结果。Vue3中的生命周期方法可以多次使用。
Vue3 的 7 种和 Vue2 的 12 种组件通信，实战解析
2401_84097798的博客
04-04 1131
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。dlerClick">按钮methods:{// 自定义事件名 sendMsgBus.$emit(“sendMsg”, “这是要向外部发送的数据”)// 在需要接收外部事件的组件内mounted(){// 监听事件的触发console.log(“这是接收到的数据：”, data)})},// 取消监听。
vue2中的通信方式
djtwebblog的博客
04-19 77
ref在vue2是用来注册dom或子组件的引用信息的，引用信息将会被注册到父级的$refs对象上面。在mian 里面创建空的vue对象作为全局总线，事件总线，同时，将其绑定在vue原型上。触发定义在父组件里面的自定义事件，他可以传两个值，第一个是自定义事件名，第二个是要传递的值。组件A this.$parent.on('add',this.add)$attrs可以接受除了props里面的接受的传递值以外的所有值。$listeners可以接受到父级穿过来的所有事件。父组件在调用子组件的时候通过字面量传递。
基础知识系列（十）：Vue2和Vue3的组件通信
A20231015的博客
12-07 309
在MyHeader.Vue中，写。在MyHeader.Vue中，写。在MyHeader.Vue中，写。在Child.vue中，写。在App.Vue中，写。在App.Vue中，写。在App.Vue中，写。在App.Vue中，写。
Vue2、3组件通信、双向绑定、插槽slot、内置指令
luemeon的博客
07-18 2809
除了传递基本的值之外，还可以传递其他类型，比如对象或数组。语法糖:value默认情况下，v-model会使用子组件的value属性作为 prop 名，使用input事件来触发更新。适应不同的数据源，与其他组件集成不会产生命名冲突。比起value更具有语义，使其他开发者更容易理解组件的预期用法和行为。props: {// 使用自定义的 prop 名 customProp},// 通过 model 选项自定义 v-model 的 prop 和事件名。
Vue3的8种和Vue2的12种组件通信，值得收藏
很多时候犯错都是在不知情的情况下发生的
07-10 827
Vue2.x组件通信12种方式写在后面了，先来 Vue3 的奥力给！用 props 传数据给子组件有两种方法，如下方法一，混合写法 方法二，纯 Vue3 写法(语法糖) 注意：如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值