Passing Data Back And Forth Between Child and Parent in Vue

0
(0)

If you are developing in Vue long enough, you will meet a scenario when you need to pass data from child to parent or parent to child. That’s what I’m going to show you in this post. I’ll make it short and to the point so you can continue working on your great project fast.

Passing data from parent to child in Vue

Passing literal value

To pass data from parent to child, you need to use props. Let’s take the following example:

I have a child component called Cow like this:




As you can see, the Cow component has a prop called parentMessage. In the parent component, we can pass data to Cow using this prop.

Then, you see the message appears as expected:

Vue passing literal props

It’s easy, isn’t it?

Updating props

What if you want to change the prop to something else? It’s quite simple, fortunately.

First, let’s create a data property in the parent component called newParentMessage. We are going to bind this property to the Cow’s prop.

In the parent component, it looks like this:

You can see that we put the colon at the beginning of the prop. This signifies we are binding the prop to a variable, not literal value as before.

Let’s create a new button in the parent component so when we click on that, the message to Cow component changes.

We need to create a click handler for this button in the parent component. Let’s call it changeParentMethod. Let’s change the message to “I’m just a poor cow”:

changeParentMessage() {
      this.newParentMessage = "I'm just a poor cow"
    }

We also need to bind the click handler to the button. So, this is the final code of the button:

Here is what the page look like:

Passing Data Back And Forth Between Child and Parent in Vue 1

If I click the button now, you’ll see that the message is changed.

Vue send data from parent to child

We have successfully pass data from parent to child. Let’s tackle the next challenge: passing data from child component to parent.

When you need to pass data from child to parent in Vue, use $emit. What $emit does it to send a event and in the parent component, you need to have a event handler to catch that event.

Sounds confusing? Let’s see a graph:

Sending data from child to parent component with event

Still confusing? Let’s code!

So currently, the cow message is “I’m just a poor cow”. What if since the start of this post, the cow has been working insanely and got rich? It feels the need to update the status to parent saying: “I’m not poor anymore”.

Let’s help the cow do that. He’s a cool cow.

In the Cow component, let’s create a button so we can send the update. On this button click we will emit an event called update_cow_status along with the data it wants to send.

Next, we need to create the function updateFinancialStatus in Cow component to actually emit the event update_cow_status.

updateFinancialStatus() {
            this.$emit('update_cow_status', {
                message: "I'm not poor anymore",
                netWorth: "$400Bn, with a B!!!"
            })
        }

As you can see, we emit the event along with a data object. The next task is to get the data in parent.

In the parent component, let’s register a handler for update_cow_status event. This is how you do it:

As you can see, you need to put the event name in the Cow component. Let’s create the getCowMessage in parent’s methods. I’ll keep it simple to just log the message from Cow.

getCowMessage(message) {
        console.log(message)
    }

Now, let’s see our page:

Passing Data Back And Forth Between Child and Parent in Vue 2

When I click on Update cow status button, I’ll get the following data in the console:

Passing data from child component to parent in Vue

As you can see, we have successfully passed the data from child component to parent with $emit.

Source code

If you need the full source code, you can download it here:

Conclusion

Passing data from child to parent and parent to child is very useful when working on small projects. In larger projects, you might want to use Vuex to store and update data and share such data between components.

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.


Leave a Reply

Your email address will not be published. Required fields are marked *