vue2组件间的通信方式

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量1.1k 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45060976/article/details/123399647
版权

vue2组件间的通信方式

  1. 父子组件：使用[props和事件]进行通信

  2. 爷孙组件：
    a. 使用两次父子间通信来事件

    b.使用 [ provide + inject] 来通信

  3. 任意组件：使用eventBus = new Vue()来通信

    a. 主要API是eventBus.&on和 eventBus.&emit

    b. 这个方法当事件多了就会比较乱，不利于维护

  4. 任意组件：使用Vuex通信（vue3 可用Pinia代替Vuex）

卡门726
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue.js】vue2组件间通信方式总结
weixin_43655896的博客
01-21 1332
目录 1. props传参 (1).父组件 ==> 子组件 (2).子组件 ==> 父组件 2.组件的自定义事件 3. 全局事件总线 4. 消息订阅和发布 5.vuex 1. 概念： 2.使用场景： 3.搭建vuex环境 4.vuex的具体使用 6. 插槽 一. 默认插槽： 二. 具名插槽： 三. 作用域插槽： 1. props传参 适用于父子组件之间传递参数 ​ (1).父组件 ==> 子组件 通信 ​ (2).子组件 ==&gt...
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue2组件间通信的14种方式详解
weixin_45655820的博客
08-30 1030
v-model 是用来在表单控件或者组件上创建双向绑定的，他的本质是 v-bind 和 v-on 的语法糖，在一个组件上使用 v-model，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。通过这种方式，虽然可以实现通信，但在应用的任何部分，任何时间发生的任何数据变化，都不会留下变更的记录，这对于稍复杂的应用来说，调试是致命的，不建议在实际应用中使用。getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算。
vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏(1)
2401_84435138的博客
05-16 392
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
Vue3组件间的通信方式
m0_64642443的博客
07-18 6114
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信（父子组件数据同步）绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API：组合式API：父组件：props用于父组件向子组件传递数据，子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时，对其传递p
3.Vue2组件间的通信方式
qq_74217055的博客
03-01 419
1.父子组件通信（props、$emit、ref、v-model、具名插槽、作用域插槽）2.兄弟组件通信（$bus、$parent、消息订阅与发布）3.祖孙与后代之间的通信（$attrs、$listener、provide、inject）4.非关系组件之间的通信（vuex）
vue 组件间通信方式
山重水复疑无路，柳暗花明又一村。
04-17 1124
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象。在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名，第二个是参数。在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用 props 来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，
Vue实现组件间通信的七种方式
热爱前端的大三在校生
10-27 6391
子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
Vue组件间通信（六种方式）
大圣归来圣骑士清欢的博客
12-20 1284
我是默认值
Vue2与Vue3组件间通信方式总结
Magic_baby的博客
12-14 1625
我们都知道Vue作为一个轻量级的低门槛入门前端框架，其核心就是 组件化开发 。Vue就是由多个组件组建成的，组件化是它的精髓，更是它的强大之处。各组件实例之间是相互独立的，这也就意味着不同组件之间数据是无法相互共用。 但实际项目开发中，我们时常需要其他组件的数据，为此诞生了组件通信的问题。针对组件之前的关系：父子、兄弟、子孙的不同选用的数据传输方式也不一样，今天就来做个总结。 Vue2组件通信 父组件向子组件传值 Props 父组件以属性的方式传值给子组件 子组件...
八种Vue组件间通讯方式合集(推荐)
10-14
以上就是Vue组件间通讯的八种常见方式，每种方式都有其适用场景和优缺点。开发者应根据实际需求选择合适的方法，以保持代码的清晰性和可维护性。在项目开发过程中，理解并灵活运用这些通讯方式，能够提高开发效率，...
vue组件间通信六种方式（总结篇）
10-17
Vue.js 的组件化设计是其强大之处，但同时也带来了组件间通信的挑战。由于每个组件都有自己的作用域，因此需要特定的方法来实现数据共享。本篇文章将详细介绍 Vue 组件间通信的六种主要方式，并通过实例解析它们的...
详解Vue2中组件间通信的解决全方案
08-29
首先，我们要区分两种主要的组件间通信方式：父子组件间的通信和非父子组件间的通信。 1. **父子组件间的通信**： - **属性设置**：这是最基础的通信方式，父组件通过属性(props)向子组件传递数据。例如，在父组件...
Vue.js组件间通信方式总结【推荐】
10-17
组件之间通信分为三种：父-子；子-父；跨级组件通信。下面，就组件间如何通信做一些总结。需要的朋友可以参考下
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 237
前提条件：组件创建完成。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 331
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 288
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue2组件间通信方式
03-28
2. 兄弟组件通信：可以通过公共父组件作为中介，将数据通过props和$emit传递给子组件，也可以使用Event Bus（事件总线）来实现组件之间的通信。 3. 跨级组件通信：可以使用provide/inject来向子孙组件注入数据，也...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值