1. childComponent.html
<template> {childComMessage} </template>
2. childComponent.js
import { LightningElement, api } from 'lwc'; export default class TestMyLwcComp extends LightningElement { @api childComMessage; @api messageFromChild(){ this.childComMessage = "Message set from child method..........."; } }
3. parentComponent.html
<template> <lightning-card title="Parent Component"> <lightning-layout> <lightning-layout-item> <c-child-component></c-child-component> <button onclick={displayChildMessage}>Display Child Message</button> </lightning-layout-item> </lightning-layout> </lightning-card> </template>
4. parentComponent.js
import { LightningElement } from 'lwc'; export default class ParentComp extends LightningElement { displayChildMessage(){ this.template.querySelector('c-child-component').messageFromChild(); } }
5. Now to make this parentComponent available in AppBuilder/Record Page/Home Page, please update "parentComponent.js-meta.xml" file as below,
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentComponent"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
6. Now deploy it to your authenticated ORG. If you are not authenticated any ORG till now then click [Ctrl + Shift + P] and in command pallet type "Authorize an Org" and select "Authorize an Org" and from browser authenticate your destination ORG where you want to deploy parent and child component.
7. Then open any existing appBuilder / create a new one and drag the <parentComponent> in to respective column and then save and activate it. Now click the tab to show it in browser and it will look as follows,
Initial load
After click on <Display Child Message> button.