通俗形象地理解下vue中组件之间通信的方法

因为组件化来开发后,中间的一些数值要相互传过来使用的话,这就是组件之间的通信问题!

这里还有说下就是因为每个组件的数据作用域是没法共享的!所以才需要通信

1、父子之间的通信

父子组件的区分就是:谁在谁的模板中,谁就是谁的孩子!
现在两个人,一个Father和Son

然后使用的时候是在大概这样使用的

有一天,父亲有好了多个儿子,为了区别他们,决定给他们取个好听的名字,比如老大叫一宝,老二叫二狗,老三叫三虎,这个时候父亲说看他们的脸记不住,决定让每个孩子都在胸前贴上自己的名字!

这里就是父亲给孩子分别传递这个名字,还展示了出来!父亲觉得很简单呀,我是你们的爹,我给你们贴上就好了呀!然后就大概这样↓

在这里插入图片描述
然后父亲就给他怀里的孩子都绑上了名字,这个时候,孩子们都默默在心中记下父亲给他们取得名字,这样方便大家喊他,然后每个孩子就用个纸条**【props】**记下了自己得名字↓
在这里插入图片描述
这样就完成了父传子之间的通信,父亲,我给你们说的啥话,自己要用本子记得哇!这个本子就是孩子中的props是通过属性来实现的

很多年过去了,孩子长大了,工作了,想给父亲点钱,但是身处外地,于是问父亲有没有银行卡,父亲缓缓地掏出了他那存款几千万的银行卡,并分别告诉了他的孩子们他的银行卡靓号6666,8888,和9999,让他们有钱可以往这里打点钱,反正他也不缺钱,但是还是要让孩子们尽尽孝心,于是乎

一宝、二狗和三虎在不同工地搬砖时收到父亲的银行卡号后都激动的想把今晚的鸡腿钱寄给父亲!

一宝吃完两个大馒头后准备去给父亲卡里打点钱,这里定义这个事件为 :一宝的孝心:往银行卡6666转了2000,【 然后发送:转钱(){$emit(6666,一宝的孝心中的2000块)}】

二狗吃完两个盐焗鸡爪后准备去给父亲卡里打点钱,这里定义这个事件为 :二狗的孝心:往银行卡8888转了4000块, 【 然后发送:转钱(){$emit(8888,二狗的孝心中的4000块)}】

三虎吃完麻辣小龙虾后准备去给父亲卡里打点钱,这里定义这个事件为 :三虎的孝心:往银行卡9999转了9000块 ,【 然后发送:转钱(){$emit(9999,三虎的孝心中的9000块)}】

这个时候,父亲躺在高级的席梦思床上,用手机绑定的银行卡来监听(v-on,@click:6666)孩子啥时候给自己打钱了,

"6666银行卡到账2000块"
“8888银行卡到账4000块”
"9999银行卡到账9000块"

父亲欣慰地看着孩子们打来地钱,随手拿起了身边82的雪碧喝了一小口!

这里是子给父传值,是通过事件的方式来实现的!

在这里插入图片描述

父亲有个亲弟弟来借钱,说是用来给他小儿子娶媳妇用的,于是乎,父亲拿出床底的支票本,潇洒地写下了2W块,然后给了弟弟,这件事传出去后,什么七大姑八大姨各种远方亲戚都来问父亲,父亲很烦心,然后找了个总管【bus】管这些亲戚借钱,让他们要借钱问这个总管去,他会把钱放到这个总管里的,父亲想出的方案大概解决了这个问题↓

在这里插入图片描述

大概解决是各种复杂组件之间的通信问题,在这里的话,父亲通过【bus.$emit()】往总管发钱,亲戚通过【 bus . $on()】来从主管那里拿到钱,bus 是空的vue实例,相当于全部人都可以用的意思,有这个bus实例对象可以使用噢!

这里更形象应该是亲戚问父亲的儿子们借钱,嗯,但是我不想改了,就这样吧,ref没写上去,后面再改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值