浅读vue组件（五）——兄弟组件的传递，中央事件总线

兄弟组件的传递方法很多，坑也比较多，在实际项目开发中，我使用过，父传子，子再传父的，多次传递，可以实现兄弟组件间的传递，这种方法不说了，没什么精髓，而且处理的比较慢，我介绍另一种兄弟组价的传递方法——中央事件总线

&&&&&&&&&&&&开发中很常用，尤其是想改变公共的header中的头像数据时经常会用到&&&&&&&&&&&&

1.首先，创建一个js，或者一个模板，目的是为了作为一个媒介，方便传递

            我创建一个Bus.js,代码如下，就两句话，一个将vue引入，一个创建vue实例

// 中央事件总线，媒介人员
import Vue from 'Vue';
export default new Vue;

2.我们做一个父组件，将要做数据传递的子组件包起来

<!-- 父组件-->
<template>
  <div class="main">
      <b1></b1>
      <b2></b2>
  </div>
</template>

<script>
import b1 from '../box/b1';
import b2 from '../box/b2';
export default {
  components: {
      b1,
      b2
  },
};
</script>

3.分别创建b1，b2两个子组件，进行数据传递

b1通过媒介的$emit中的send方法进行请求，将数据a每次改变的值传递给兄弟组件2

b1

//b1
<!-- 兄弟组件1 -->
<template>
  <div class="main">
    <div class="box">
      <!-- 点击触发事件 -->
      <el-button @click="sendMsg">向b2传值</el-button>
    </div>
  </div>
</template>

<script>
// 引入媒介人员
import Bus from "../../assets/Bus";
export default {
  data() {
    return {
      a: 1
    };
  },
  methods: {
    // 通过媒介的$emit中的send方法进行请求，将数据a每次改变的值传递给兄弟组件2
    sendMsg() {
      Bus.$emit("send", this.a++);
    }
  }
};
</script>
<style lang='less' scoped>
.box {
  width: 500px;
  height: 100px;
  line-height: 100px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
</style>

b2通过媒介的$on接收send方法,方法中的参数就是获取的值,通过方法把值赋给兄弟2组件使用

b2

//b2
<!-- 兄弟组件2 -->
<template>
  <div class="main">
    <div class="box">接收b1的值：{{msg}}</div>
  </div>
</template>

<script>
//引入媒介人员
import Bus from "../../assets/Bus";
export default {
  data() {
    return {
      msg: 0
    };
  },
  // created(){
  //     // // 通过媒介的$on接收send方法,方法中的参数就是获取的值,通过方法把值赋给兄弟2组件使用
  //     // Bus.$on("send",(val)=>{
  //     //     this.msg=val;
  //     // })
  // },
  mounted() {
    // 通过媒介的$on接收send方法,方法中的参数就是获取的值,通过方法把值赋给兄弟2组件使用
    Bus.$on("send", val => {
      this.msg = val;
    });
  }
};
</script>
<style lang='less' scoped>
.box {
  width: 500px;
  margin: 0 auto;
  height: 200px;
  line-height: 200px;
  background: #333;
  color: #fff;
  text-align: center;
}
</style>

4.看一下效果，每次点击b1的按钮，兄弟组件b2的值就随着改变