Event Handling in Vue

Tram Ho

As in the previous post, we have rendered the list of users. Now we want to add a user to the list of users, how do we go to find out below.

Event Handling

Listen to Events

In Vue.js we can use the v-on directive to listen for DOM events and execute JavaScript when these events are fired.

Example: Listen to the click event on the DOM.


v-on:click in the above code is equivalent to onClick attribute on HTML. Events can be used like:

  • click
  • hover
  • mouserover
  • scroll
  • drop

You have a reference card list Dom event here

Event Handling method

If we bind a method after the event name then we can run the code you write in that method.

For example, as simple as you want to print a message console, you can also do the following:

  • How to use Event Object As you all know, when an event occurs, javascript will create an event object, it contains information related to the event, such as mouse position relative to the browser, mouse position relative to The current element emits the event. In Vue, when we use directives, this auto object has been passed into the event handler function for use.

Event Modifiers For example, when you submit a form, usually the form submission methods will redirect before running the code in the event handling method. To prevent this transfer from happening, we will do the following in the event handling method:

Vue provides us with event modifiers with directives.

Some of the event modifiers can handle different situations

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

Custom events

Vue is component-oriented, so can we make a component emit its own event? The answer is absolutely world,.

For example, we want a child component to send data to the parent component. Here we cannot use props by props because it is only allowed from parent to child, if you intentionally change that data in the child component, it will give an error avoid . So how can the child component tell the parent component so that the parent component can change that data.

To do this, we will call this.$emit(“my-event”) from the child component when we want to trigger some event to change the data of the parent passed down to the child. For example, if we want to increase the counter by one unit, we will do the following:



Event bus

As you can see above, the child component can emit events on the parent component. But if we want that child component to emit on any component To do this, you can use event bus. This is where we create a Vue instance so we can call the event on any component that imports it. You just understand it is a means to help the component can perform emit on any component that it imports.

First you create a js file in any folder in your project with the following content:



Finally import this js file into a component that can listen for this event when the other child component emits to be able to catch it. I suggest you to use lifecycle hook created because you can access Vue instance of component here. And then you use the $on method of the bus to listen for the event: the first parameter is the event name, the second parameter is its callback.

File handle event

This is how components can share data with each other. You can also refer to Vuex for more information. Conclusion You also understand a bit about events and how to handle events in Vue.

Share the news now