Calling Child Component Method Using Parent :

Example  shows how to call child component method from parent using template.querySelector.

• findLegend -> Method in childComponent
• Master Blaster Sachin Tendulkar -> Its parameters passing to findLegend Method
• In this child component method, findLegend method exposed as api method property.

ParentComponent4.html

<template>

    <lightning-card title="Calling child comp from Parent method" icon-name="custom:custom14">

        <c-child-component4 ></c-child-component4>

    <lightning-button label="Find Cricket Legend Name"

                      onclick={fireEvent}

    >

    </lightning-button>

</lightning-card>

</template>

Js

import { LightningElement } from 'lwc';

export default class ParentComponent4 extends LightningElement {

    //Calling child method 

    fireEvent(){

        //Calling child method from parent

        this.template.querySelector("c-child-component4 ").findLegend('Master Blaster Sachin Tendulkar');

    }

}

xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

childComponent4.html

<template>

  

    <p> Do you would like to know whos the legend of cricket? </p> <br/> 

    <b> Click on below button to get Legend Name</b>  <br/> 

     <p> Legend Name: <b> {cricketerName} </b></p>

</template>

Js

import { LightningElement,api } from 'lwc';

export default class ChildComponent4 extends LightningElement {

    @api cricketer;

    cricketerName;

    //Decorate method with apI property

    //Publicly expose this method

    //Otherwise it becomes private method

    @api findLegend(Name){

       this.cricketerName =Name;

    }

}

xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

  <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>