Shulou(Shulou.com)06/01 Report--

This article is about how to use $on in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In vue, "$on" is used to listen for custom events on the current instance, which can be triggered by "vm.$emit", and the callback function receives additional parameters from all incoming event triggering functions with the syntax of "vm.$on (event, callback)".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

The usage of $on in vue

Use $on (eventName) to listen for events in vue

On (eventName) listens for custom events on the current instance. Events can be triggered by vm.$emit. The callback function receives additional parameters from all incoming event triggering functions.

Vm.$on (event, callback)

Parameters:

{string | Array} event (arrays are only supported in 2.2.0 +) {Function} callback

Example 1 single event on this page

Left Click export default {methods: {isClick () {this.$emit ('isLeft',' Click event!') ;}, mounted () {this.$on ('isLeft', (val) = > {console.log (val);});}}

The above code is through the click event of the button, then the this.$emit passes the event, and then the this.$on captures the event on this page

Example 2 multiple events on this page

Left Click export default {methods: {isClick () {this.$emit ('isLeft',' Click event!') ;}, isClickOther () {this.$emit ('isRight', [' click 1 click, 'click 2']);}}, mounted () {this.$on ('isLeft', (val) = > {console.log (val);}); this.$on (' isRight', (... val) = > {console.log (val);}) This.$on ([isLeft', 'isRight'], () = > {console.log (666);});}}

The above examples are the two click events on this page. You can monitor two events or pass multiple parameters at the same time.

Thank you for reading! This is the end of the article on "how to use $on in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.