vue之事件总线

当前位置:

首页 > temp > JavaScript教程 >

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>

来源：

https://www.cnblogs.com/zhengrongbaba/p/15074621.html

栏目列表