vue使用bus总线，实现非父子组件间的通信

 

vue组件通信方式有好多，可以使用props传值，但是props只能父子组件使用。也可以使用vuex，但是vuex比较重，而且非全局的通信最好不要使用vuex

 

在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

 

这里有两种方式可以使用

 

第一种是新建一个bus.js文件，初始化一个空的Vue实例，作为中央总线，然后再组件引用时调用这个bus.js文件

import Vue from 'vue';
const EventBus = new Vue();

export default EventBus;

 

第二种是全局定义，将bus挂载到vue.prototype上

import Vue from 'vue';

Vue.prototype.bus = new Vue();

 

下面根据一个实例来看一下这两种写法

子组件1

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
  </section>
</template>

<script>
  import eventBus from '~/utils/eventBus';
  export default {
    methods: {
      isClick() {
        eventBus.$emit('isLeft', '点击事件！');
        this.bus.$emit('liRight', 'asdasdasdasd');
      }
    }
  }
</script>

子组件2

<template>
  <section>
    <h1>right</h1>
  </section>
</template>

<script>
  import eventBus from '~/utils/eventBus';
  export default {
    data() {
      return {
        name: 'right默认值'
      };
    },
    mounted() {
      this.bus.$on('liRight', (val) => {
        console.log(val);
      });
      eventBus.$on('isLeft', (info) => {
        console.log(info);
      });
    },
    beforeDestroy() {
      this.bus.$off(['isLeft', 'liRight'])
    }
  }
</script>

父组件

<template>
  <section>
    <el-row>
      <el-col :span="12">
        <left/>
      </el-col>
      <el-col :span="12">
        <right />
      </el-col>
    </el-row>
  </section>
</template>

<script>
  import left from '~/components/left'
  import right from '~/components/right'
  export default {
    components: {
      left,
      right
    }
  }
</script>

以上事例，我们在组件1中触发了事件，然后组件2中监听到事件，并进行相关操作，两个组件是非父子组件通信

 

 

总结

1.可以实现vue跨级组件之间的通信，在实际的开发项目中，如果数据和业务逻辑不是特别复杂，没有必要使用Vuex，那么我们就可以通过这种方式，实现我们再实际业务逻辑中的组件间数据传递，而且代码比较简洁直观。

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

 

 

嗯，就酱~~