Parent Child communication in Vue, Angular and React (All in TypeScript)

In this story, we will look into interaction between parent and child components in popular front end technologies — Vue, Angular and React.

We will look into how component can pass data to other components and how child component can emit an event along with data value that the parent component can listen to.

We will follow common example - the parent passes some suggested user names to child component. The child component renders a form allowing user to input an user name and when the form is submitted the value is passed to the parent. We will also add sample test case to verify the same. Please feel free to skip to particular technology (Vue/Angular/React) if required.

Vue

The component can pass data to other components using props. We can use v-bind to dynamically pass props. The Child component can generate event by using built-in $emit method passing the name of the event and the data. The parent can listen to any event on child using v-on .

Lets see this with an example.

Parent.Vue

Notice below - suggested user names array is passed as prop of child component. :suggestedUserNames is short for v-bind:suggestedUserNames .

The Child Component emits changeUserName with selected user name in $event parameter. The Parent listens to event of same name. The @changeUserName is short for v-on:changeUserName .

Child.Vue

The input property for child are marked with @Prop decorator. In handle submit form event, the user name is emitted with $emit method of the class.

@submit.prevent is used to prevent default action on form submission. Note that user name is initialized (to empty string) to make it reactive, required for class component.

Parent.spec.ts

The test code is simple. The parent component is mounted and form is submitted after setting user name input value and verified if parent component got submitted user name.

Angular

Angular provides @Input() and @Output() properties to share data between the parent context and child directives or components. Use the @Input() decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component

An @Output() property initialized to Event Emitter allows child to raise event that can pass data to the parent.

Lets see this with an example.

Parent Component

The suggestedUserNames is passed to child using property binding and selectedUserName is bound using event binding of same name. The $event will contain user name when child emits the event.

Child Component

The child is able to receive the suggestedUserNames since it is declared as @Input() property. The @output() property selectedUserName is defined as event emitter and it emits the user name when form is submitted using this.selectedUserName.emit(this.userName) .

parent.component.spec.ts

React

Each React element receives input properties called as props. The props are used to pass data from parent component to child components. The prop can also contain function. The Child component can invoke function in prop with data as argument that child want to send to parent.

Lets see this with an example.

Parent.tsx

Parent send suggestedUserNames and onSubmit as props

Child.tsx

Child communicates to the parent the submitted user name using this.props.onSubmit(this.state.userName). Parent can access it in onSubmit(userName: string) {} method.

The corresponding test

These are simple scenarios for parent child communication. Thanks for reading!