You will be surprised by the custom event in Vue js

Src: https://d2jq2hx2dbkw6t.cloudfront.net/170/vue-full-guide.png

There are a lot of rich set of events in vue js and the facility of adding custom events.

If you are familiar with Vue, Props are used while sending data to the child component and events are used to change the state of the parent component.

The below code is nothing special and is just a modified version of this example of vue js custom events.

Custom event in vue js

In html section, you can see the component tag where surprise event is the custom event.

After you click the Surprise Me button, a click event is fired from the inside of the surprise-app component, in which the surprise method is called. The surprise method of that component is responsible for emitting the surprise event, which is listened by the:

<surprise-app @surprise=”surpriseMe”></surprise-app>

after which the surpriseMe method of the Vue instance is called and the surpriseMessage is filled with ‘you got surprised’.

I apologise, if I didn’t surprise you !