Detailed explanation of the use of v-on events in Vue.js-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-04-14 15:55:00

Original

2529 people have browsed it

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
  }
 }
})

Copy after login

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')

Copy after login

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"

Copy after login

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!