I have parent component which has two child components which pass data to each other on click event.

OnRow click in component A, I want to pass certain object data to B component which will be emitted from A to Parent and then Parent will pass that data as props. Same action happens with B to A via parent component, again $emit is used here.

Can someone please suggest some better solution which will keep data instantly updated.

CodePudding user response：

You can use Vuex or Pinia for state management and watch for any particular state needed to monitor.

You can also use Provide-Inject

CodePudding user response：

I would suggest instead of emitting events from one component to another, just use something that can handle states.

For that you have two options 'out-of-the-box' with vue:

1. Vuex - depracated, yet you can still use it https://vuex.vuejs.org/guide/
2. Pinia - state management system for vue3 https://pinia.vuejs.org/introduction.html#basic-example

I'd pick Pinia, because it's easier to use and less code.

The way states work, is that you besically update the data that's stored somewhere outside of your component. And then you update or use it whenever/wherever you want.