Child to parent data Vue JS

Question

Hi Guys, I'm not quite sure how to do this, I'm very new to Vue, how can I send my data from NewDeal component to DealsTable component? As you can see NewDeal has two parent components. I've read about $emit and $on, but just want to confirm if do I really need to do it like newDeal -> QuickActions -> SideBar? And I am not sure how to go from there if what I'm thinking is correct. I hope you can shed some light on me.

I've tried emitting an event from NewDeal component and listening it from the DealsTable component but didn't work, I am not sure if this is possible, or it should really be that the child is a direct descendant of the parent?

Thanks!

Answer 1

Fixed it using a global variable bus and replacing this by bus.

Declaration in app.js:

window.bus = new Vue({})

Emitter: bus.$emit()

Listener: bus.$on()

Answer 2

I've tried emitting an event from NewDeal component and listening it from the DealsTable component but didn't work

Looks like you have a solution but I thought I'd comment on this one part in case it helps. The reason that DealsTable didn't see the event from NewDeal is that vue events emitted by a child component are only propagated to the immediate parent component and no higher.

If you want the vue event to be seen higher up the chain then the child's parent would need to emit the event once it listened for the event and received it. In this way each parent could bubble the event up the chain but in many situations that's too complicated, and so your window.bus approach is the way to go. Hope that help make what you were seeing make more sense.