Parent to Child Event communication in LWC

Generally Aura framework, we can call the method of Child Component from the Parent Component with the help of <aura: method>. In LWC Aura Methods Become JavaScript Methods.

in LWC, we have to use the @api decorator to make the children properties/method public available so a parent can be able to call it directly using JavaScript API. For example, create one public method (which we need to access in parent component) in ChildComponent with @api decorator like below.

Child Component

@api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}

In order to access that above child method in the parent component.

ParentComponent. this.template.querySelector('c-child-component').changeMessage(event.target.value);

The querySelector() method is a standard DOM API that returns the first element that matches the selector.

Below is simple syntax to pass value from parent component to child component.

childComp.html

<template>
Parent Component Message:- { Message}
</template>

Create a javaScript method in the child component to assign a value on child attribute. 

childComp.js

import { LightningElement, track, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@track Message;
@api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}
}

Create one Parent Component to call child component(ParentComponent.html)
Now Create JavsScript method in Parent component to call child method with “this.template.querySelector”.

ParentComponent.js

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleChangeEvent(event){
this.template.querySelector(‘c-child-Comp’).changeMessage(event.target.value);
}
}

Example:

We will two Components one for parent and other for child.

• parentComponent
• childComponent

childComponent creating like record-form base component to display the record detail in view mode. It is reusable and can be called in any other component by passing the record-id and object-api-name.

childComponent.html

<template>   <lightning-record-form     record-id={getIdFromParent}     object-api-name={objectApiName}     layout-type="Full"     mode="view" >   </lightning-record-form> </template>

childComponent.js

@api decorator is used to expose it to parent component.

import { LightningElement, api } from "lwc"; export default class ChildComponent extends LightningElement {   @api getIdFromParent;   @api objectApiName; }

childComponent.js-meta.xml

No changes needed for this example.

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childComponent">     <apiVersion>46.0<apiVersion>     <isExposed>false</isExposed> </LightningComponentBundle>

parentComponent

This Parent component is calling another child component in it by passing the record-id dynamically using @api recordId which gives the current record id.

parentComponent.html

<template>   <c-child-Component     get-id-from-parent={recordId}     object-api-name={objectApiName}   ></c-child-Component> </template>

parentComponent.js

import { LightningElement, api } from "lwc";   export default class ParentComponent extends LightningElement {   @api recordId;   @api objectApiName; }

parentComponent.js-meta.xml

We have exposed the component to record page only as home and app page do not give any record id to recordId property defined in js file. objectApiName is coming from Lightning App Builder through property pane in it.

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ParentLwcComponent">     <apiVersion>46.0</apiVersion>     <isExposed>true</isExposed>     <targets>         <target>lightning__RecordPage</target>     </targets>     <targetConfigs>         <targetConfig targets="lightning__RecordPage">             <property name="objectApiName" type="String" />         </targetConfig>     </targetConfigs> </LightningComponentBundle>

Related

Events & Communication in Lightning Web Components(LWC)

Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. "Use events to communicate up the component containment hierarchy" .For example, a child component, example-todo-item, dispatches an event to tell its parent, example-todo-app, that a user selected it. Events in Lightning web components are built on DOM Events,…

Data Binding in Lightning Web Component

Data binding is the synchronization of data between business logic and view of the application. There are two types of data-binding One-Way Data BindingTwo-Way Data Binding One-Way Data Binding Vs Two-Way Data Binding UI data changes can occur within two scopes: 1.Within a single component (One-Way Data Binding) Eg- Typing…

Decorators in Lightning Web Component (LWC)

Decorators The Lightning Web Components programming model has three decorators that add functionality to a property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.1) @track2) @api3) @wireSystax to Decorate a property@decoratorName propertyName='propertyValue';Sytax to decorate a method@decoratorName getMethodName(){…