Vue Emit Event To Parent

Posted on  by admin
In this article I will show you how to pass data from child to parent in vue.We know that if we want to send data from parent to child we can use props but for the reverse case we have to use a different approach to achieve this.

In child.vue we are using a method named $emit this method takes 2 arguments first the custom event and the second is the data we are passing.

changeTitle is the custom event. 'Awesome' is the data we are passing to parent. in App.vue we are calling a method named 'ChangeT($event)' on the event 'changeTitle' (it is custom event you can name as your preferences).

when the ChangeT function called it takes the parameter which we are passing from child in this case $event='Awesome'.

then we are simply changes the data value with this $event value . Now we have successfully passed data from child to parent in vue.

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?


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:.


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.

Manuel AbascalManuel Abascal

Modified1 year, 7 months ago. The use of v-model creates a two-way bind between the view and data model WITHIN a component. And a view interaction can emit an event to a parent component.

It is possible, though, to have a data model change in a child component emit an event to a parent component?

Because as long as the user is the one clicking the checkbox, things are fine in both the parent and the child (the data model updates AND the event is emitted).


I assume this must be possible in some way..

If not emitting from the child, perhaps there's some way to have the parent component "watch" the child component's data?

Thank you for any help or guidance!

I'll keep reading and looking for an answer in the meantime!

child component. parent component.

UPDATE: After playing around a bit more with @IVO GELOV's solution, the issue I'm running into now is that, when multiple Child components are involved, since the Parent's one singular value of myBooleanVar drives the whole thing, checking the box of one child component causes all child components to be checked.

Not the answer you're looking for? Browse other questions tagged javascriptecmascript-6vue.js or ask your own question.