Vue JS -Emit Multiple Values

*Emit Multiple Values from Child to Parent in VueJS *

VueJS custom events are a great way to communicate between child and parent components.
I was recently was in need of a way to pass more than one value from child to parent within a single custom event. The VueJS Docs do not provide any example showcasing this and instead I needed to refer to some comments within a Stack Overflow thread and also some articles here on dev.to

Here is what worked for me
To emit more than one parameter, it's best to pass the data as an object:

VueJS's custom events only accepts two parameters:

1. The name of the event. In this case, the event name is success.
2. Data you want to pass. This can be a string, object, number, boolean, or function.

Access the parameters from the parent component using an event listener:
We emitted the date event from the child component. This event can be captured within the parent component where the child is rendered using the @ sign, in this case, @date.

@date calls the dateRangeSelected method when success is emitted from the child component.
The fromDate and toDate params will be received as a parameter of type object for the dateRangeSelected method.We can then access these parameters in this method and use as you please.