This practical guide provides code snippets about custom events in Vue which can be used to pass data up the component tree.
For regular DOM events like click please refer to the Vue Docs.
Now, data always flow down the component tree in Vue or other frontend frameworks - with props.
But, how to pass data up without using global state like Vuex? Using custom events allows us to pass data up the component tree, or notify the parent component that a custom event has happened - if no data is being passed.
But what if we need to notify a parent component that some event has been triggered in a child or even pass data upwards?
The answer is emitting custom events in Vue.
We need to take care of these steps to emit events in Vue:. Think about the trigger for the event: a condition in a method, computed property or watcher in child component from where the event is emitted.
Emit the event with this.$emit("my-custom-event", \[data\]) when the condition is met.
Catch the event bubbling up to a parent component. Event naming convention: Custom event names should be in kebab-case like in my-custom-event.
In addition, it is not recommended to use capital letters like in PascalCase or camelCase since HTML event handlers are case-insensitive.
For this step it is essential to define in which case the event should be emitted.
We need to define a condition inside a computed property, a method or a watcher in order to get there.
Suppose we're having a form and want to pass the input value up to the parent when the form is being submitted.
Let's dive right into the example code:. In this example ChildComponent we're defining the condiction when the event shall be emitted: When the form is being submitted.
Our event handler is a method onSubmit().
It is very common to include form validation inside event handlers for submitting forms.
A minimal example of form validation in this case is shown next:.
In the example above we're making use of the regular submit event and a custom event we called form-submitted. It is important to differentiate, here.
click and submit are the most common regular DOM events. The v-on-directive provides several event modifiers in case you want to call event.preventDefault() or event.stopPropagation().
Here are quick examples for event modifiers on click or submit events in Vue:.
If you want to know more about event modifiers check out the Vue Docs.
Now, inside the parent component we need to catch the emitted event and setup a handler method there.
Inside our handleFormData method we are simply putting the form data passed from the child component in the local state of the parent component.
You may also see the short-hand version of v-on, which is @ because it is so frequently used in Vue.
Modified4 months ago.
Now I need to emit event from parent to child component. I see in vue version 3 $on, $off and $once instance methods are removed.
Application instances no longer implement the event emitter interface. How now I can emit events from parent component and listen from child component in vue version 3?
66 gold badges3737 silver badges9595 bronze badges. 9595 bronze badges. You would not listen from the child component for parent events, you would instead pass a prop down to the child and if the child component needs to update the data you would emit an event from child to parent to update the state.
Read only life cycle:Parent > Prop > Child. Read/Update life cycle:Parent > Prop > Child > Emit > Parent > Update > Child Updates. If you were like me calling some event on this.$root.$on(..) and this.$root.$emit(..) in Vue2 from any parent/child to any child/parent for somehow keep your code cleaner rather then using bunch of emits and props respectively and have your code blows up..
from Vue3 doc, event bus pattern can be replaced by using an external library implementing the event emitter interface.use a library that implement a pub-sub pattern or write it.vue3 event description.
Now if you're using the Option-API (like vue 2) y need to import that event file then using it right a way in any component.
if you are using the