Vue EventBus 事件总线机制源码解析 | 极客日志

JavaScript大前端

Vue EventBus 事件总线机制源码解析

Vue 事件总线（Event Bus）基于独立 Vue 实例实现组件间解耦通信。核心依赖 _events 对象存储回调数组，通过$on 注册监听、$emit 触发执行、$off 移除回调及$once 单次触发机制完成消息分发。源码层面，eventsMixin 扩展了原型链方法，利用闭包与数组操作维护事件状态，是理解 Vue 响应式系统外通信机制的关键切入点。

游戏玩家发布于 2019/9/240 浏览

Vue EventBus 事件总线机制源码解析

Vue EventBus 事件总线机制源码解析

在 Vue 应用中，Event Bus 是一种常用的跨组件通信方案。我们可以把它想象成一个全局的'管道'，两端连接着不同的组件，任何一个组件都可以通过这个管道发送或接收消息。本质上，这只是一个独立的 Vue 实例，利用其内置的 $on、$off 和 $emit 方法来实现功能。

我们先看一个基础的使用示例。

<script src="./vue.js"></script>
<div id="app">
  <child-comp-1></child-comp-1>
  <child-comp-2></child-comp-2>
</div>
<script>
  var eventBus = new Vue();

  Vue.component('child-comp-1', {
    template: "<div></div>",
    mounted: function () {
      eventBus.$on("event", function(value){
        console.log("child-comp-1 receive event: " + value);
      });
    }
  });

  Vue.component('child-comp-2', {
    template: "<div></div>",
    mounted: function () {
      eventBus.$emit("event", );
    }
  });

   app =  ({
    : 
  });

function eventsMixin (Vue) {
  var hookRE = /^hook:/;
  Vue.prototype.$on = function (event, fn) {
    var vm = this;
    if (Array.isArray(event)) {
      for (var i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn);
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn);
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup if (hookRE.test(event)) { vm._hasHookEvent = true; }
      if (hookRE.test(event)) {
        vm._hasHookEvent = true;
      }
    }
    return vm;
  };

  Vue.prototype.$once = function (event, fn) {
    var vm = this;
    function on () {
      vm.$off(event, on);
      fn.apply(vm, arguments);
    }
    on.fn = fn;
    vm.$on(event, on);
    return vm;
  };

  Vue.prototype.$off = function (event, fn) {
    var vm = this;
    // all if (!arguments.length) { vm._events = Object.create(null); return vm }
    // array of events if (Array.isArray(event)) { for (var i$1 = 0, l = event.length; i$1 < l; i$1++) { vm.$off(event[i$1], fn); } return vm }
    // specific event var cbs = vm._events[event]; if (!cbs) { return vm }
    // specific handler var cb; var i = cbs.length; while (i--) { cb = cbs[i]; if (cb === fn || cb.fn === fn) { cbs.splice(i, 1); break } }
    if (!arguments.length) {
      vm._events = Object.create(null);
      return vm;
    }
    if (Array.isArray(event)) {
      for (var i$1 = 0, l = event.length; i$1 < l; i$1++) {
        vm.$off(event[i$1], fn);
      }
      return vm;
    }
    var cbs = vm._events[event];
    if (!cbs) {
      return vm;
    }
    if (!fn) {
      vm._events[event] = null;
      return vm;
    }
    var cb;
    var i = cbs.length;
    while (i--) {
      cb = cbs[i];
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1);
        break;
      }
    }
    return vm;
  };

  Vue.prototype.$emit = function (event) {
    var vm = this;
    {
      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];
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return vm;
  };
}