Hello everyone, it’s me again, lately the project is coding Vue, I did a post to share some knowledge points about Vue. When you build a dynamic website with Vue, you will most likely want to add, edit, delete, open dialog, close dialog, and so on. For example, if you click on a button to submit a form or mouse movement event, for example, you want the website to be able to respond to something like show confirmation, or hover displaying the text. So today I will talk about how to handle events (events) in Vue.

Handling events in Vue

For example, I can block events by adding a v-on directive to the DOM element. In general, I want to handle the button element click event, then we can add the following

Notice we add the parameter after the v-on directive, which tells Vue this is the name of the event type we want to handle, in our case it’s the click event.

Then I will bind the click event handler method, in this case it is handleSubmit .

Note: v-on directive can be more concise with @ syntax as follows:

Events handle types

Besides click events, how can other DOM events be handled in Vue? The question will surely have the answer: Vue can handle any form of web or mobile native event as well as custom event including the following:

• submit
• keyup
• drag
• scroll

You can refer to the list of popular DOM Events here, I just listed some of them above.

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 out a message console, you can do the following

How to use the Event Object

As you know, when an event occurs, the javascript will create an event object, it contains information related to the event such as the mouse position relative to the browser, the position of the mouse relative to the current element. emitting the event. In Vue, when we use directives, this auto object has been passed into the event handler to use.

Event Modifiers

I’ll give an example first: for example, when you do submit in the form, the method sending the form will often redirect before running the code in the event handling method . To prevent this from happening, we would do the following in the event handling method :

Vue provides us with event modifier with directives.

Vue gives us a number of event modifier that can be handled in a variety of situations

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

Custom events

As we all know, Vue is designed in a component orientation, so can we make a component emit its own event or not? The answer is absolutely world,.

For example, we want a child component to send data to a parent component. Here we can’t use props because it’s only passed from parent to child, if you deliberately change that data in the child component, there will be a avoid error. So how can the child component tell the parent component to change that data?

To do this, we’ll call this.$emit("my-event") from the child component when we want to trigger some event to change the parent’s data passed down to the child. For example, if we want to increment by one unit of counter then we would do the following: ParentComponent

ChildComponent

Event bus

As you have seen above, child components can emit events onto parent components. But if we want that child component to emit on any component such as grandfather component, instrument component, for example, …

To do this, you can use the event bus . This is where we create a Vue instance so we can call the event on whatever component that imports it. You just understand it is a means to help the component to perform emit on any component that imports.

First, you create a js file in any folder in your project with the following content eventBus.js

The next step is to import this file into which component you want to emit event. You can use the $emit method

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

This is exactly how components can share data. You can also refer to Vuex offline.

Conclude

So through some of my sharing above, I hope you also understand a part about events and how to handle events in Vue. Thank you for reading my article.

Reference

https://vuejs.org/v2/guide/events.html