VueJS: Passing Data to Parent Components. You will refactor your components based on single responsibility principle you break the orignal components to various child components.Now they need data you pass the data to them using props but remember we are in realm of one way data flow so suppose now user has interacted with that child. To Pass Data From Child Component to Parent and Parent Component to child Component use below code I have Created 2 Component Parent and Child as shown in below Image I added TextBox on Child Component and needs to use its value on parent Component HTML For Child Component is as below Now to pass.
thanks for reading my question.
I have read about it
![Child Child](/uploads/1/2/4/7/124715504/984466093.jpg)
The concept is the same, I need to pass a data object from child to parent, i have used $emit to pass data to parent component but doesn't works. Do u know what is wrong? Check my code here:
Thanks in advance.
Community♦
SommerSommer40911 gold badge44 silver badges1515 bronze badges
2 Answers
You aren't listening to the event. I changed the event name to
clicked-show-detail
. Try this.In the
showDetailModal
method of your component.In your Vue.
Example.
BertBert49.2k66 gold badges8888 silver badges9191 bronze badges
Props are for parent -> child
v-on directive captures the child components events that is emitted by $emit
Child component triggers clicked event :
Parent component receive clicked event:
bereket gebredinglebereket gebredingle1,47611 gold badge99 silver badges2222 bronze badges
Not the answer you're looking for? Browse other questions tagged vue.jsemit or ask your own question.
Posted by1 year ago
Archived
This seems to be a somewhat common problem, but I am not seeing an elegant solution. I'd love to learn a good design pattern for this.
I have a parent form page that passes data directly to a child component, rather than the child receiving the data via a getter. On refresh, the child receives the Vuex's stores default values, in this case an empty array. I would like the child to be able to receive the actual Vuex store data and not the empty values that appear briefly on refresh. The form pages acts correctly once I switch back and forth from another page and only has the issue on refresh.
If I put the values in a getter in the child, they are not mutable without affecting the whole state. I do not think that I should need to add more to the Vuex store or to add cookies in order to receive the Vuex data on refresh, but I am aware that these solutions work.
4 comments