【vue+EventBus】兄弟组件传值

写这篇文章是为了记录，每次面试的时候被问到兄弟组件传值，我都是泛泛地说一下，不是很自信。

直到自己用过之后，兄弟组件传值确实挺好用的，记录一波······

假设父组件为A，兄弟组件为B和C

我的触发是tab切换，由B切到C
将B组件的值带给C

首先是要一个新的vue实例传值
在utils文件夹或者你自己定义的存放js文件的文件夹下，新建bus.js(名字可随意取)
里面只需要两行代码

import Vue from 'vue'

export default new Vue()
1
2
3

创建实列不是很重要，重要的是把它引入到B页面后

import EventBus from '@/utils/bus'

1
2

就可以在B页面开始使用啦，在需要传值的地方赋值之后，通过 EventBus.$emit触发一个自定义的方法sumsObj，将值放在后面

 const obj = {}
       obj.unitType = this.unitType
      obj.Isapprove = this.Isapprove
     obj.hasTodo = this.hasTodo  
    EventBus.$emit('sumsObj', obj)
1
2
3
4
5

然后在C页面就可以取到值了，C页面也要引入

import EventBus from '@/utils/bus'

1
2

在需要接收的地方，通过EventBus.$on接收自定义的方法sumsObj，通过箭头函数的方式获取值

 EventBus.$on('sumsObj', res => {
   this.paramsObj = res
    this.unitType = this.paramsObj.unitType
   this.Isapprove = this.paramsObj.Isapprove
   this.hasTodo = this.paramsObj.hasTodo  
})
1
2
3
4
5
6

好用到离谱，是不是~~~~~
备注：bus.js只新建一份即可， EventBus.$emit可以触发不同的方法名，所以不会影响其他页面的兄弟组件传值