Detailed explanation of using eventemitter2 to implement Vue component communication

Overview

When there is no parent-child relationship between two components, leveraging the Vue standard props pass value and emit trigger event cannot solve the problem of communication between them. The recent project is using eventemitter2 to enable communication between unrelated components. This article shares my summary and experience of the use of eventemitter2.

You can read the npm document of eventemitter2eventemitter2 introduction. It is the event interface provided. Install as follows

npm install --save eventemitter2

The EventEmitter2 property of the module is a constructor that can generate eventemitter2 instances. An instance defines methods for binding, triggering, and removing events. The example methods involved in this article include on, off, emit, removeAllListeners, and more methods. You can go to the npm document to learn it yourself.

Like other event handling mechanisms, eventemitter2 event handling must include three parts:
Binding Event =》 Triggering Event =》 Removing Event

This sharing mainly discusses the use of eventemitter2 in the vue project:

Method 1: Combined with class modular programming, encapsulate instances, event names, binding event methods and removal event methods
Method 2: Combined with the development of vue plug-in, add event instances globally

Method 1: Combined with class

Development steps:

Add module event_confg.js to store eventEmitter2 instance and event name
Add module event_manager.js, method to encapsulate instance binding events and method to remove events
Follow the steps of binding event =》 Trigger event =》 to remove events, using eventeitter2

Step 1: Create event_confg.js

var EventEmitter2 = require('eventemitter2').EventEmitter2;
// The event name is defined in the emite, and the event name is defined in the configconst eventConfig = {}

 = new EventEmitter2()

 = {
 "CHECK_CHANGES": "checkChanges"
 // For more event names, add them here}
export default eventConfig

Step 2: Create event_manager.js

This module creates a class. After passing in eventemitter2 instance, the method of adding and removing events of the instance is encapsulated.

Here, the on and off methods are used respectively to bind and remove events.

export default class {
  constructor(evtInst){
     = evtInst
     = {} // {eventName: [callback1,callback2...]}
  }
  // Bind the callback with the event name evtName as a callback, and save the event name and callback to listeners for later removal of events  addListener(evtName, callback){
    (evtName, callback)
    if(![evtName]){
      [evtName] = [callback]
    }else{
      [evtName].push(callback)
    }
  }
  removeListeners(){
    ().forEach(evtName =&gt; {
      [evtName].forEach((callback, index) =&gt; {
        (evtName,callback)
      })
    })
  }
}

Step 3: Use eventemitter2 in the component

Binding events

The same event name can bind multiple event callbacks. When the event is triggered, the callback function with the same name will be executed in sequence.

import EventManager from "@/utils/event_manager.js"
import eventConfig from "@/utils/event_config.js"
...
// Initialize event_manager instance = new EventManager()
//Bind events with the addListener method of the instance(.CHECK_CHANGES, obj =&gt; {
   = (NaN,parseInt())
})
(.CHECK_CHANGES, obj =&gt; {
  ("The second event also triggered!",obj)
})

Trigger event

Event triggers and callbacks are executed synchronously. After triggering the event in the following way, the execution process is:

Print ready to trigger! =》 Execute callback =》 Execute $message pop-up box

import eventConfig from "@/utils/event_config.js"
...
// Parameters passed to event callback functionlet obj = {value: val, type: "", msg: ""}
// Trigger event("Prepare to trigger!")
(.CHECK_CHANGES, obj)
// Processing after event triggerthis.$message({type: , message: })

Remove Events

Remove event in beforeRouteLeave or beforeDestory

If you are using beforeRouteLeave, please call its next function and let the route continue to execute

beforeDestroy(){
  ()
}

Method 2: Developed in combination with Vue plug-in

The idea is to add a global eventemitter2 object as a property to the top-level Vue object.

Development steps:

Create a plugin using install where you add global properties to Vue
Use the global() method, use the plugin
Follow the steps of binding event =》 Trigger event =》 to remove events, using eventeitter2

Step 1: Create global variables

Add global attribute $emit_inst to store instances; add global $emit_name to store event names

var EventEmitter2 = require('eventemitter2').EventEmitter2;

// Event name, instanceconst emitter = {}

// Create an instance and define the event name = function(Vue){
 .$emit_inst = new EventEmitter2()
 .$emit_name = {
  "CHECK_TYPE_TWO": "checkTypeTwo",
  "ANOTHER_EVENT": "anotherEvt"
  // Continue to add the instance name later }
}
export default emitter

Step 2: Use plug-ins

In the new Vue() command, call the() method before creating an instance, use the plug-in

import emitter from "./emitter"
(emitter)

Step 3: Use eventemitter2 in the component

Binding events

Here is the on method of the official document, passing in eventName and callback, binding events to the instance, and defining the callback function.
The same event name can bind multiple event callbacks. When the event is triggered, the callback function with the same name will be executed in sequence.

this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj =&gt; {
  this.value1 = (NaN,parseInt())
   = this.value1 ? "success" : "warning"
   = this.value1 ? "character" : "number"
  ("CHECK_TYPE_TWO first trigger")
})
this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj =&gt; {
  ("CHECK_TYPE_TWO triggered for the second time")
})

Trigger event

Event triggers and callbacks are executed synchronously. The execution process is explained above.

this.$emit_inst.emit(this.$emit_name.CHECK_TYPE_TWO, obj)

Remove Events

When removing events directly on the instance, it is convenient to use removeAllListeners because only the event name is passed.

beforeDestroy(){
  this.$emit_inst.removeAllListeners(this.$emit_name.CHECK_TYPE_TWO)
}

Summarize:

Using eventemitter2 is to create an instance correctly, bind, trigger and remove events to the instance.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.