Emit Multiple Values from Child to Parent in a VueJS Custom Event
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.
Here is what I found.
To emit more than one parameter, it's best to pass the data as an object:
this.$emit('success', {
username: 'CodyBontecou',
error: false,
})
VueJS's custom events only accepts two parameters:
- The name of the event. In this case, the event name is
success
. - 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 success
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, @success
.
- @success calls the onSuccess method when success is emitted from the child component.
- The username and message params are destructured from the object passed into the success emit and are now usable within the onSuccuss function to do as you please.
<LoginForm @success="onSuccess" />
methods: {
onSuccess({ username, error }) {
...
},
}
It took me a little while to find the solution to this problem, so I figured it was best to document it within a blog post for others to benefit from.
I hope it helped!
Top comments (0)