Communicate from Parent to Child Component in LWC

skChildComponent.html

<template>
    <div style="background-color:#b2b689;border-style: solid;padding:2%;">
        <b>Child component</b>
    
    <div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> 
                <p>Getting value from parent using public property @api decorator</p>
                <p>URL passed from parent-<b>{passedUrl}</b></p>
            
    </div>
    <div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> 
        <p>Call a public function on the child</p>
        <p>increase counter by 10 from parent-<b>{counter}</b></p>
    </div>

    <div style="background-color:#7ff6f6;border-style: solid;padding:2%;"> 
        <p>Use a Public Getter and Setter</p>
        <p>Square of Captured Input from parent-<b>{squareValue}</b></p>
    </div>
    </div>
</template>

skChildComponent.js

import { LightningElement,api,track } from 'lwc';

export default class SkChildComponent extends LightningElement {
    @api passedUrl;
    @track counter=0;
    @track squareValue;
    @api
    increaseCounterbyTen(){
        console.log('****increaseCounterbyTen called');
        this.counter += 10;
    }

    @api
    get userInputNumber(){
        return this.squareValue;
    }
    set userInputNumber(value){
        console.log('****userInputNumber setter get called-value:'+value);
        if(value){
            this.squareValue=value*value;
        }else{
            this.squareValue=undefined;
        }
        
    }

}

skChildComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

skParentContainerCmp.html

<template>
    <lightning-card  title="Communicate from Parent to Child">
        <div style="background-color:#E6E6FA;border-style: solid;padding:2%;">
            <b>This is parent Component</b>
            <br/>
            <div style="padding:2px;">
                <lightning-button label="SFDCSTUFF BLOGS" onclick={sendMessageToChildCmp}></lightning-button>
                <lightning-button label="TRAILHEAD" onclick={sendMessageToChildCmp}></lightning-button>
            </div>
            
            <div style="padding:2%;">
            <lightning-button label="Increase Counter by 10" onclick={increaseCounter}></lightning-button>
            </div>
            <div style="padding:2%;">
            <lightning-input type="number" label="Enter Number" value={userInput} onchange={onChangeHandler}></lightning-input>
            <lightning-button label="Calculate Square in Child" onclick={sendUserInputToChild}></lightning-button>
            </div>
            <c-sk-child-component passed-url={selResourceURL} user-input-number={userInputToPassToChild} ></c-sk-child-component> 
            
        </div>
</lightning-card> 
    
</template>

skParentContainerCmp.js

import { LightningElement,track } from 'lwc';

export default class SkParentContainerCmp extends LightningElement {

    @track selResourceURL;
    @track userInput;
    @track userInputToPassToChild;
    sendMessageToChildCmp(event){

        const selBtnName = event.target.label;
        console.log('****selBtnName:'+selBtnName);
        
        if(selBtnName=='SFDCSTUFF BLOGS'){
            this.selResourceURL='https://www.sfdcstuff.com/';
        }if(selBtnName=='TRAILHEAD'){
            this.selResourceURL='https://trailhead.salesforce.com/';
        }

    }

    increaseCounter(){
        this.template.querySelector('c-sk-child-component').increaseCounterbyTen();
    }

    onChangeHandler(event){
        const inputValue = event.target.value;
        console.log('****onChangeHandler called**inputValue:'+inputValue);
        this.userInput= inputValue;
    }
    sendUserInputToChild(){
       
        this.userInputToPassToChild= this.userInput;
        console.log('****increaseCounter called**this.userInputToPassToChild:'+this.userInputToPassToChild);
    }
}

skParentContainerCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>