Emitting Data from Child to Parent

Hello everyone, I’m relatively new to Vue and working on my first project. I have a parent form component that is divided up into 4 child components ( personal, address, employment, and other ). When I click my submit button on the parent I want to send all the data from the child components to be sent to the parent and then sent to my backend. I think using emit is the proper way to handle this however I’m not finding any examples of how to emit based on a button click from the parent. All the examples I’m finding are emitting from a button click inside the child emitting to the parent. I’m using Vue3

You are right in that you cannot (and should not) make your child components emit data when you click a button in the parent component. At least not directly. There are 2 main ways you can do this.

  1. You should emit the data from your child components up to the parent component at some point (on data change for example). Then collect that data in the parent component and you will be able to use it. Or you can pass down a prop to your children and listen to that prop change and then emit the data up to the parent.

  2. If you have a larger SPA app you can also use Pinia for global state management.

This is what I thought I was going to have to do. I’m just not sure how to implement this. Can you show me an example? I’m familiar with passing props I just never really understood emitting and watching for data changes. Are you talking about watching for data change on keystroke?