Vue source code reading implementation of $on, $off, $emit

These methods are initialized and mounted on the Vue prototype through the eventsMixin() method.

The location of eventsMixin():

The implementation logic of eventsMixin:

Add $on, $once, $off, $emit methods to Vue’s prototype.

$on:

Support for passing in a single event name, or an array of event names,

If it is an array, then traverse and call $on() to add the event to the _events object of the component instance

Added to the event list, the event list exists on the _events object, each key is the event name, and each value is the callback function of the event.

For example, add an event named example, then

 const vm = { _events: { example: [fn1, fn2, fn3] }}

$off

If no parameters are passed, all custom event listeners of the current component instance will be cleared. Use with caution

 Vue . prototype . $off = function ( event?: string | Array < string >, fn?: Function ): Component { const vm : Component = this if (! arguments . length ) { vm. _events = Object . create ( null ) return vm } }

This article is transferred from https://www.wujingquan.com/posts/b285ef9f.html
This site is only for collection, and the copyright belongs to the original author.