Vue 兄弟组件传值

上一篇讲到了父子组件传值，我将其分别概括为传值和传事件两大类。但是除了父子组件传值之外，还存在兄弟组件传值以及 vuex传值等情况。vuex传值这个之后放在 vuex 专栏里面去写

兄弟组件传值：是使用发布对应模式解决组件间传值问题，叫总线机制，也叫Bus / 总线 / 发布订阅模式 / 观察者模式

1、新建一个js文件 ：取名随意， 不过一般都是见名知意直接叫做 Bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

为了方便也可以直接挂载到 main.js 中

Vue.prototype.bus=new Vue();

2、避免每个传值 和 接收值 组件中都要 引入 这个 Bus.js 文件，我们可以将它 放在全局 main.js  中，挂载到 Vue.prototype上

在 main.js 中引入 该文件 路径要写对

import { Bus } from 'Bus.js' //这里的路径要写对

//挂载到 Vue.prototype  上  这样，其他的 兄弟组件  在传递接收的时候，可以世界使用this.Bus
//而不用 每次引入 Bus.js 文件
Vue.prototype.Bus = Bus

3、传值组件：通过this.Bus.$emit() 来传递，this指向的是Vue实例，因为将 Bus 挂载到了 Vue.prototype 上，所以每个组件都可以通过 this.Bus 来调用 Bus 上的方法。

log ：传递事件的名称

120: 传递到兄弟组件的值

methods:{
   getText:function(){
       //this.bus执行vue实例,
       this.bus.$emit('log',120)
    }
},

4、接收值组件：通过this.Bus.$on() 来接收

可以看到，这里使用 that 接收了 当前的 this，这是因为，在 on 事件中 ，this指向已经改变了，并不是指向当前的 Vue 实例，所以 data 中的 msg属性 ，不能直接使用 this.msg 取到 ，需要使用 接收的 that

mounted:function(){
  var that=this;
  this.Bus.$on('log',content => { 
      that.msg = content
      console.log(content) //120
   })
}

 兄弟组件的传值和接收值的方法，和子传父类似，都是使用 emit() 注册事件，传递数据，然后通过on 接收数据，不同的是，需要加一个 Bus 总线机制