vue之事件总线

1.事件总线介绍

在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。

 

2.事件总线原理

事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者

{
  "event1": [hander1, hander2],
  "event2": [hander1, hander2, hander3],
}

 

若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去

若给某个事件取消监听者，就从这个事件对应的数组删除这个处理函数

若要触发某个事件，就让这个事件对应的数组存放的处理函数依次执行

用class模拟一个事件总线

// 事件总线
class Bus {
  constructor() {
    // 用来记录事件和监听该事件的数组
    this.listeners = {};
  }
  // 添加指定事件的监听者
  $on(eventName, handler) {
    this.listeners[eventName].add(handler);
  }
  // 取消监听事件
  $off(eventName, handler) {
    this.listeners[eventName].delete(handler);
  }
  // 触发事件
  $emit(eventName, ...args) {
    this.listeners[eventName].forEach((fn) => fn(...args));
  }
}

 

3.事件总线的使用

在main.js中，引入事件总线

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';
// 将事件总线作为Vue.prototype的属性，方便每个组件中通过this.$bus获取事件总线
Vue.prototype.$bus = new Vue({});

new Vue({
  el: '#app',
  render: (h) => h(App),
  router,
});

直接使用vue实例作为事件总线，是因为vue实例上本身就具有这三个方法（$on、$emit、$off）

 

 

home.vue中触发事件总线的事件

<template>
  <div>
    <button @click="handleClick">点击</button>
    <!-- 使用test-comp组件 -->
    <test-comp></test-comp>
  </div>
</template>

<script>
import testComp from './test-comp.vue';
export default {
  name: 'Home',
  components: {
    testComp,
  },
  methods: {
    handleClick(event) {
      // 触发事件总线中的事件，并传参数
      this.$bus.$emit('my-click', [1, 2]);
    },
  },
};
</script>

test-comp.vue中订阅事件总线中的事件

<template>
  <div class="red"></div>
</template>

<script>
export default {
  mounted() {
    // 订阅事件总线中的事件，并接受参数（要等home.vue的this.$bus.$emit执行后才能执行）
    this.$bus.$on('my-click', (msg) => {
      console.log('接受组件home传来的参数msg: ', msg);
    });
  },
  methods: {},
};
</script>