How do you emit events from a child to parent component?

What's really being asked

This question probes whether you understand component boundaries and unidirectional data flow in frontend frameworks. The interviewer wants to see that you know how to push data upward without breaking encapsulation, that you can name the specific APIs and template syntax for at least one major framework, and that explicit event contracts beat implicit side channels.

The full answer

First, state that the child should never mutate parent state directly. Second, describe the Vue pattern: use defineEmits in the setup block to declare the event, then call emit with a descriptive name like updateQuery and pass the string payload; the parent attaches a listener with v-on or the shorthand @updateQuery and receives the value in its handler. Third, describe the Angular pattern: import Output and EventEmitter, decorate a property with @Output, instantiate it as new EventEmitter<string>, call this.queryChange.emit(value), and bind in the parent with (queryChange)="onQueryChange($event)". Fourth, mention semantic naming, typed payloads, and parent-owned state.

The mistakes people make

A major red flag is suggesting the child reach up and modify a parent property directly or call a parent method through a shared service without an explicit event contract. Another mistake is confusing Angular two-way binding syntax with output emission, or claiming that Vue requires a custom event bus in modern versions. Using vague language like just pass a callback prop without explaining framework syntax also signals shallow experience. Finally, forgetting to declare the emit in Vue or omitting the @Output decorator in Angular shows a lack of attention to framework conventions.

What usually comes next

The interviewer may ask how you would debounce the input before emitting to avoid excessive events, how to validate the payload in the child before emission, or how to handle the same scenario with a reactive form control in Angular. They might also ask what happens if you forget to declare the emit in Vue or forget the @Output decorator in Angular, so be ready to explain the resulting runtime warnings or template compile errors. You could also be asked how to emit from deeply nested children, which introduces intermediate propagation or a state management layer.

A concrete example

Imagine a SearchInput component. In Vue, inside the child you write const emit = defineEmits and declare a search event with a string payload, then on input you call emit with the event name and the current query value. The parent uses the component with an at-search listener bound to a local handler. In Angular, the child declares an Output property named search initialized as a new EventEmitter of string, and on input it calls emit with the query value. The parent uses the component in its template with a parenthesized search binding that calls its own handler and passes the implicit dollar-event argument. Both patterns keep the parent in control of state while the child remains a pure presenter.