Vue Custom Event

Posted on  by admin

Custom events helps us to communicate to parent components in Vue.js.

Let’s learn how to create custom events in vue.js with the help of exmaples. Suppose we have a Counter component which is accepting data from its parent component with the help of props.

Passing arguments

From App component we are passing data to Counter component. The problem is currently our Increment button present in Counter component can’t do anything. when we click on a Increment button we need to increment the num data property present inside our App component, to do that we need to create a custom event inside our Counter component.

Custom event can be created by using this syntax this.$emit('eventname').

Now our Counter component is emitting the handleIncrement custom event to listen this event in App component we need to add @handleIncrement. Somecases we need to increment our count value by 2 or 3 in such cases this.$emit method can also accept the value as its second argument. In parent component we can access that argument value by using $event variable. VueJS Useful Resources.

Selected Reading. v-on is the attribute added to the DOM elements to listen to the events in VueJS.

Congratulations!

The following code is used to assign a click event for the DOM element.

There is a shorthand for v-on, which means we can also call the event as follows −. On the click of the button, it will call the method ‘displaynumbers’, which takes in the event and we have consoled the same in the browser as shown above. We will now check one more event mouseover mouseout. In the above example, we have created a div with width and height as 100px.

It has been given a background color red. On mouseover, we are changing the color to green, and on mouseout we are changing the color back to red.

Hence, during mouseover, a method is called changebgcolor and once we move the mouse out of the div, a method is called originalcolor. This is done as follows −. Two events - mouseover and mouseout - is assigned to the div as shown above.

We have created a styleobj variable and given the required style to be assigned to the div. The same variable is binded to the div using v-bind:style = ”styleobj”.

# Properties

In changebgcolor, we are changing the color to green using the following code. Using the stylobj variable, we are changing the color to green. Similarly, the following code is used to change it back to the original color.

This is what we see in the browser. When we mouseover, the color will change to green as shown in the following screenshot. Vue has event modifiers available on v-on attribute. Following are the modifiers available −. Allows the event to execute only once. We need to add dot operator while calling the modifiers as shown in the syntax above.

Let us use it in an example and understand the working of the once modifier. In the above example, we have created two butttons. The button with Click Once label has added the once modifier and the other button is without any modifier.

This is the way the buttons are defined. The first button calls the method “buttonclickedonce” and the second button calls the method “buttonclicked”.

There are two variables defined in the clicknum and clicknum1. Both are incremented when the button is clicked. Both the variables are initialized to 0 and the display is seen in the output above. On the click of the first button, the variable clicknum increments by 1. On the second click, the number is not incremented as the modifier prevents it from executing or performing any action item assigned on the click of the button.

On the click of the second button, the same action is carried out, i.e. the variable is incremented. On every click, the value is incremented and displayed. Following is the output we get in the browser. If we click the clickme link, it will send an alert as “Anchor tag is clicked” and it will open the link https://www.google.com in a new tab as shown in the following screenshots.

App Setup

Now this works as a normal way, i.e.

the link opens up as we want. In case we don’t want the link to open up, we need to add a modifier ‘prevent’ to the event as shown in the following code. Once added, if we click on the button, it will send an alert message and will not open the link anymore.

The prevent modifier prevents the link from opening and only executes the method assigned to the tag. On the click of the link, it will display the alert message and does not open the url anymore. VueJS offers key modifiers based on which we can control the event handling.

Consider we have a textbox and we want the method to be called only when we press Enter.

We can do so by adding key modifiers to the events as follows. The key that we want to apply to our event is V-on.eventname.keyname (as shown above).

We can make use of multiple keynames. For example, V-on.keyup.ctrl.enter. Type something in the textbox and we will see it is displayed only when we press Enter. Parent can pass data to its component using the prop attribute, however, we need to tell the parent when there are changes in the child component.

For this, we can use custom events. The parent component can listen to the child component event using v-on attribute.

The above code shows the data transfer between the parent component and the child component. The component is created using the following code. There is a v-for attribute, which will loop with the languages array.

The array has a list of languages in it. We need to send the details to the child component. The values of the array are stored in the item and the index. To refer to the values of the array, we need to bind it first to a variable and the varaiable is referred using props property as follows.

The props property contains the item in an array form. We can also refer to the index as −.