剖析vue$emit、$on方法，让你在非父子组件通信中游刃有余

2023-09-13 14:14:08

前言
vue作为一款简洁而强大的前端框架，为我们带来了极大的便利。熟悉vue的同学大多对$on方法的使用颇有了解。然而，仅仅知道使用还是不够的，因此现在我们将共同编写一个简单类似于vue空实例的中间件，对vue组件通信的奥秘进行深入的探索。

深入剖析emit和on

在介绍中间件之前，我们先回顾一下emit和on方法的功能。emit是vue中用于触发事件的方法，而on则是用于监听事件的方法。简单地说，当一个组件触发了一个事件时，另一个组件可以通过$on监听这个事件，从而达到组件之间的通信。

非父子组件通信的方案

在vue官网上给出了一个用于非父子组件通信的解决方案：使用一个空的vue实例作为事件总线。这个解决方案的原理非常简单：创建一个新的vue实例，然后将需要通信的组件注册为它的子组件。这样，这些子组件就可以通过emit和on方法与事件总线进行通信了。

如何实现我们的中间件

现在，我们就可以着手实现我们的vue中间件了。这个中间件将作为一个独立的模块，为非父子组件通信提供一个方便的解决方案。

第一步，我们需要创建一个新的vue实例作为我们的事件总线。

const eventBus = new Vue();

第二步，我们需要将需要通信的组件注册为事件总线的子组件。

Vue.component('component-a', {
  template: '<div>组件A</div>',
  methods: {
    emitEvent() {
      this.$emit('my-event', 'Hello from component A');
    }
  }
});

Vue.component('component-b', {
  template: '<div>组件B</div>',
  methods: {
    onEvent(message) {
      console.log('收到来自组件A的消息：', message);
    }
  }
});

第三步，我们需要在需要接收事件的组件中使用$on方法监听事件。

export default {
  mounted() {
    eventBus.$on('my-event', this.onEvent);
  },
  beforeDestroy() {
    eventBus.$off('my-event', this.onEvent);
  },
  methods: {
    onEvent(message) {
      console.log('收到来自组件A的消息：', message);
    }
  }
};