vue之事件总线

2021-07-30 18:35:54 阅读：198 来源： 互联网

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>

标签：vue,总线,监听,eventName,事件,emit
来源： https://www.cnblogs.com/zhengrongbaba/p/15074621.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue之事件总线

1.事件总线介绍

2.事件总线原理

3.事件总线的使用