How to use $on in vue
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!
