Detailed explanation of the use of v-on events in Vue.js

This time I will bring you a detailed explanation of the use of v-on events in Vue.js. What are the precautions for using v-on events in Vue.js. The following is a practical case. Let’s take a look. .

Each Vue instance implements the Events interface, namely:

Use $on(eventName) to listen to events

Use $emit(eventName) to trigger the event

Vue's event system is separated from the browser's EventTarget API. Although they operate similarly, $on and $emit are not aliases for addEventListener and dispatchEvent.

In addition, the parent component can directly use v-on where the child component is used to listen to the events triggered by the child component.

Here is an example from a document:

April 11, 2017Updated

<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</p>
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

step 1:

Everyone sees this first. In fact, after rendering, the custom label in step 4 becomes like this: Step 1 The same code, so we should start from here to understand the event binding between parent and child components. In the sub-component, the click event (click) is bound to the function increment (that is, step 2 in the picture ). It is easy to understand here, that is, the of the sub-component is clicked. The button will trigger the increment function

located in the child component Step 2 and Step 3:

The increment function is triggered to execute, and a statement calling the function is executed in step 2

this.$emit('increment')

Let’s take a look at the documentation

vm.$emit( ​​event, […args] ): Trigger an event on the current instance. Additional parameters will be passed to the listener callback

What does it mean here? This is how I say it in my own vernacular:

Through this function, the parent component can know what function the child component called, this.$emit('increment') is similar to the child component saying "hi, dad, I called my own increment function" to the parent component. Notify parent component

Step 4:

Looking back at the custom tag defined in the parent component, you can see

v-on:increment="incrementTotal"

What does that mean? Let’s explain it in plain English

That is to say, "Child, when you call the increment function, I will call the incrementTotal function to respond to you"

At this time, we recall step 3. In the child component, we have used emit to notify. Therefore, this forms a mutual response and transfer of information between the parent and child components. In fact, during the development process, the communication between parent and child components also uses this method. When a component passes information to a child component, it uses props parameters. Usually, the information passed by the parent component is not modified directly in the child component, and such a hook is used to notify the parent component to change certain parameters.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS anonymous functions

nodejs based on ffmpeg for live video streaming

Detailed explanation of the steps for setting global styles in Vue2.0

The above is the detailed content of Detailed explanation of the use of v-on events in Vue.js. For more information, please follow other related articles on the PHP Chinese website!