vue组建通信的几种方式

最新推荐文章于 2023-07-11 17:06:59 发布
最新推荐文章于 2023-07-11 17:06:59 发布
阅读量352 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang091816/article/details/107445170
版权
什么是组件？

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
组件的关系如下图
在这里插入图片描述
如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
下面来总结一下几种组建通信的方式：

1. 父传子

在这里插入图片描述
在这里插入图片描述

2.子传父

在这里插入图片描述
在这里插入图片描述

3.兄弟组件传参 在这里插入图片描述
4.vuex

在这里插入图片描述

wang091816
关注
Vue组件通信的四种方式汇总
11-27
前言 众所周知vue是一种mvvm...第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事  1.import son from './son.js' 引入子组件 son  2.在components : {"son"} 里注册所有子组件名称  
12种组件通信的方法
weixin_68902642的博客
07-15 1516
12种数组通信的方法
超详细的vue组件之间通讯的8种方式
weixin_70134200的博客
07-11 6119
想要深入了解 vue 组件之间的通讯，这一篇文章足矣，里面详细讲解了组织之间通讯的8种方式，一篇文章即可掌握组件通讯。
vue组件间通信的13种方式
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
Vue中组件之间通信的-六大方式-总结
JackieDYH的博客
05-12 2277
方式一：props/$emit 父组件向子组件传值 通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据users:["Henry","Bucky","Emily"] 注：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed //App.vue父组件 <template> <div id="app"> <users v-bind:user.
组件通信的6种方式
caigoutu的博客
06-20 1万+
vue组件通信的6种方式
详解vue组件通信的三种方式
12-09
本质是通过派发事件然后监听事件从而更改值，(父子组件通信也可用这个方式，但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转，这种方式我这里就不做演示的了，因为我的题目是非父子通信) ...
vue 组件之间的通信
青蛙king的博客
08-14 5347
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
vue中的组件通信
TeFuir__Lv的博客
12-08 1271
vue中的组件通信
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue组件通信6种方式总结（常问知识点）
bb_xiaxia1998的博客
11-04 2010
在子组件中可以通过$emit向父组件发生一个事件，在父组件中通过v-on/@进行监听。子组件 ComponentA：
Vue 组建通信
curryFMVP的博客
02-04 215
Vue 组件通信 1.父组件向子组件传递信息 // parent.vue child是子组件 需要传递的信息是msg <child :msg="message"></child> // child.vue 子组件通过props数据来接收信息 data() { return { props:['msg'] } } 2.子组件向父组件传递信息 // child.vue this.$emit('msg', 'message') // parent.vue <child
组件通信的方法
HQ\(^o^)/的博客
09-02 1472
1.props 通过属性传值，子props接收2.$emit/v-on 父组件使用子组件声明的自定义事件，传值时触发3.v-model 原理即props与$emit；父：v-model="值"、子：this.$emit('input',值)4..sync 原理即：属性名& this.$emit('update:属性名', 值)5.refs 操作dom，通过this.$refs6.$children/$parent this.$children获取所有子组件的数组对象，包括子组件的属性和监听事件；
vue组件间通信方式
htong521的博客
12-31 2324
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 vue组件间的几种通信方式：props、$emit/$on、vuex、$paraent/$children、$attrs/$listeners、provide/inject. 1.父子组件间传值 父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、p...
vue组件通信
qq_67983277的博客
11-09 768
vue组件通信
组建通信
KMNO444的博客
05-30 173
组件通信一般分为以下几种情况： 父子组件通信 兄弟组件通信 跨多层级组件通信 任意组件 对于以上每种情况都有多种方式去实现，接下来就来学习下如何实现。 父子通信 父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。 这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props， ...
组建通信的8种方式
weixin_49602426的博客
11-09 229
Vuex、父传子、父传子、eventBus
vue中组件之间通讯的13种方式
v610379640的博客
07-15 864
vue中组件之间通讯的13种方式
vue组件通信有几种方式
最新发布
09-13
Vue组件通信有以下几种方式： 1. 父子组件通信：父组件通过props向子组件传递数据，子组件通过事件将数据传递给父组件。 2. 子父组件通信：子组件通过$emit触发一个自定义事件，并通过该事件将数据传递给父组件，父组件通过v-on监听该事件并处理传递的数据。 3. 兄弟组件通信：可以通过共享一个用于存储数据的公共状态管理器（如Vuex）来实现兄弟组件之间的通信。 4. 跨级组件通信：可以使用provide和inject来在祖先组件中提供一个数据，并在后代组件中注入该数据，从而实现跨级组件之间的通信。 5. 非父子组件通信：可以使用一个空的Vue实例作为事件中心，通过$on和$emit进行组件之间的通信。 6. 使用事件总线：创建一个Vue实例作为中央事件总线，用于在任何组件之间进行通信。 这些方式可以根据具体的需求和场景选择使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值