vue eventBus实现原理，你没看懂算我输

最新推荐文章于 2025-07-05 09:01:50 发布

原创最新推荐文章于 2025-07-05 09:01:50 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

33 篇文章

订阅专栏

本文详细探讨了Vue中的EventBus实现原理，对比了使用全局Map和全局Vue对象的区别。通过示例展示，解释了EventBus如何实现组件间的数据通讯，以及在组件A和B之间的交互过程，强调了EventBus在数据监听和更新上的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始拿到eventBus的时候很幼稚的想，用一个全局vue对象充当数据容器，那为什么不用一个全局的map就可以

window.busMap = {}

组件a

pd: window.busMap.a,

<template>
    <div>{{pd}}</div>
</template>

组件b

  created () {
    window.busMap.a = '1'
  },

效果
在这里插入图片描述

在a组件给全局map赋值，在b组件确实能获取到值，但是map不会帮你监听分发数据所以这只是一次性买卖，当我通过点击事件修改map中的值时，b组件并不会根据map值的更新而更新，
下面我们看全局vue对象，也就是eventbus
a组件

<template>
    <div>{{pd}}------{{busPd}}</div>
</template>

<script>
export default {
  name: 'test',
  created () {
    window.vueBus.$on('busEvent', (e) => {
      this.busPd = e
    })
  },
  data () {
    return {
      pd: window.busMap.a,
      busPd: ''
    }
  }

b组件

<template>
  <div class="content row-center">
    <div class="boxStyle1 borderStyle" @click="test">
      <test></test>
    </div>
  </div>
</template>

<script>
import test from './components/test'
export default {
  name: 'busPage',
  components: {test},
  data () {
    return {
      count: 0
    }
  },
  created () {
    window.busMap.a = '1'
  },
  methods: {
    test () {
      this.count++
      window.busMap.a = this.count
      console.log(window.busMap.a)
      window.vueBus.$emit('busEvent', this.count)
    }
  }
}
</script>

<style scoped>

</style>

效果
在这里插入图片描述
在vueBus这个vue对象中注册busEvent事件，根据emit源码（如下）遍历执行所有名为event的事件。当我们在b组件emit 分发事件后再a组件注册事件就将被执行 cbs[i].apply(vm, args);，再a组件的参数就将赋值给a组件中的data，根据vue数据绑定原理此时this.busPd的set()方法被触发，遍历busPd属性在get()方法中收集到的依赖，并更新依赖也就是{{busPd}}，此时数据就从一个vue对象传递到另一个vue对象

Vue.prototype.$emit = function (event) {
    var vm = this;
    console.log(vm);
    {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    console.log(cbs);
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      for (var i = 0, l = cbs.length; i < l; i++) {
        cbs[i].apply(vm, args);／／当emit的时候调用该事件。注意上面说的vue在初始化的守候。用bind修饰了事件函数。所以组件上挂载的事件都是在父作用域中的
      }
    }
    return vm
  };