December 8, 2020

Nick

Using custom emitted events in VueJS

Until now $emit and $on was standard, but now the world has changed ...

JavaScript

⚡ Using custom emitted events in VueJS

VueJS is Javascript frontend library which makes my happy in my daily workflow. It's easy to understand and is supported by many modules and libraries - especially NuxtJS. The downside: is a library intuitive you will don't read the (whole) documentation. And this is exactly what happened to me.

I recommend to read this page, but on short:

// do this in your child component (f.e. named mycomponent)
this.$emit('myevent')

// and this in the parent component
<mycomponent @myevent="someOtherFunction" />

Typically I catch emit events with the $on(...) function, but it's not necessary. You can catch your custom-event as well as a click event on your component in the html.

Nick

I am a software developer who spends most of his spare time working on open source projects. I also like taking pictures and playing table football.