说完父子组将的通信,这里写一下平行组件之间的通信
看一下关系图这里创建三个组件,其中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,它的作用就是将绑定和触发放到一个实例中,起到桥梁作用
总结:继续巩固利用绑定和触发这类事件来实现传值的思想,再要注意绑定和触发的实例指向问题。