兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;

原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；

1.在项目中创建一个bus.js文件,暴露一个vue实例

import Vue from 'vue';

export default new Vue;

2.在父组件中注册两个子组件testA、testB

<template>
  <div class="pre-wrap">
    <test-a></test-a>
    <test-b></test-b>
  </div>
</template>

<script>
import TestA from '../../../components/commiss/testA.vue';
import TestB from '../../../components/commiss/testB.vue';
export default {
  components: { TestA, TestB, },
}

3.在两个子组件中分别引入bus

import bus from '../../common/config/bus';

 4.testB组件传值给testA组件：(传值使用$emit)

testA组件接收到testB组件的值：(接收值使用$on)

testA.vue子组件

<template>
  <div>
    <div>我是testA{{myList}}</div>
    <div @click="clear()">清空</div>
  </div>
</template>

<script>
import bus from '../../common/config/bus';
export default {
  components: {},
  data() {
    return {
      myList: [],
    };
  },

  mounted() {
    bus.$on('sendList', data => {
      this.myList = data;
    })
  },

  methods: {
    clear() {
      this.myList=[];
      bus.$emit('sendList', this.myList);
    },
  },
}

</script>

testB.vue子组件

<template>
  <div style="color:red; border-top:1px solid #333;">
    <div>{{list}}</div>
    <div @click="clickHandle()">B事件</div>
  </div>
</template>

<script>
import bus from '../../common/config/bus';
export default {
  components: {},
  data () {
    return {
      list:[],
    };
  },

  mounted() {
    bus.$on('sendList', data => {
      this.list = data;
    })
  },

  methods: {
    clickHandle(){
      this.list.push('a')
      bus.$emit('sendList',this.list);
    },
  },

}
</script>

到这里其实使用bus总线实现兄弟组件之间的传值已经完成。

演示结果如下: