组件通信之平行组件之间的通信

说完父子组将的通信,这里写一下平行组件之间的通信
看一下关系图在这里插入图片描述这里创建三个组件,其中App组件作为父组件,包含着A,B两个子组件,现在我们要实现的是A,B两个平行组件之间的传值。
具体到要实现的功能是:给B组件初始化一个count值,A组件为一个点击按钮,每次点击A中的按钮,B中的数值加1。下面看代码实现:在这里插入图片描述
解释:这里我们在全局注册了A,B连个组件,然后写入了App组件中。具体到怎么实现点击A组件来触发B组件呢。①首先,我们new一个Vue实例,取名为bus,来帮助我们实现后面的传值。②在B组件的created函数中利用$on绑定一个自定义事件,命名为’add’,并给一个参数n,且利用箭头函数实现n的自增功能。这里尤其注意,一定要将这个add绑定在bus上,所以应该是bus.$on。③在A组件中定义一个点击事件函数,在函数中调用$emit,来触发我们在B组件中绑定好的add事件。同样道理,这里注意要把触发事件$emit绑定到bus上,否则触发不到。

注意:为什么不能是在B中this.$on绑定,在A中this.$emit触发?因为这两个this会默认分别指向自己的vue实例,相当于在B中绑定事件,想要触发的时候却是在A中,因此我们才引入一个公共的实例bus,它的作用就是将绑定和触发放到一个实例中,起到桥梁作用

总结:继续巩固利用绑定和触发这类事件来实现传值的思想,再要注意绑定和触发的实例指向问题。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值