非父子组件通信---bus总线

• 两种创建方式：

  1.全局定义，在main.js文件将bus挂载到vue.prototype上
  
  	import Vue from 'vue';
  	Vue.prototype.bus = new Vue();
  
  2.新建一个bus.js文件，作为中央总线，然后再组件引用时调用这个bus.js文件
  
  	import Vue from 'vue';
  	const EventBus = new Vue();
  	export default EventBus;	
  

• 用法：

  父组件：
  <template>
    <div>
    </div>
  </template>
  
  <script>
    import left one '~/components/one'
    import right two '~/components/two'
    export default {
      components: { one,two}
    }
  </script>
  

  子组件one:
  <template>
    <div>
      <el-button type="primary" @click="Click">点击</el-button>
    </div>
  </template>
  <script>
    import eventBus from '@/utils/eventBus';
    export default {
      methods: {
        Click() {
          eventBus.$emit('one-A', 'AAAAAA');
          this.bus.$emit('one-B', 'BBBBBB');
        }
      }
    }
  </script>
  

  子组件two:
  <template>
    <div></div>
  </template>
  <script>
  import eventBus from '~/utils/eventBus';
  export default {
    mounted() {  
        eventBus.$on('one-A', (val) => {
          console.log(val); // AAAAAA
        });
        this.bus.$on('one-B', (val) => {
          console.log(val); // BBBBBB
        });
    },
    beforeDestroy() {
       this.bus.$off(['one-A', 'one-B'])
    }
  }
  </script>
  

  注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况