Defining public properties and communication between parent to child component

Hi,

We are going to see a small example with @api decorator. It will be useful for defining properties and methods public.

To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component rerenders. When a component rerenders, all the expressions used in the template are reevaluated.

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

Let's see small example here which can be ready to accept values from other components:

HTML file:(resultComponent.html)

<template>

    <div>Addition Result:{result}</div>

</template>

JavaScript file:(resultComponent.js)

import { LightningElement,api } from 'lwc';

export default class ResultComponent extends LightningElement {

    @api result;

}

Configuration file:(resultComponent.js-meta.xml)

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

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

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>           

    </targets>

</LightningComponentBundle>

You can pass the values to "result" property with decorator @api from another component. You have to kebab case to include the component and its properties. 

<c-result-component result={result}></c-result-component> 

I am adding this to the calculator example as shown below.

<template>

    <lightning-card>

        <h3 slot="title">

            <lightning-icon icon-name="utility:connected_apps" size="small">

</lightning-icon>

            Calculator Example

        </h3>

        <div slot="footer">

                <!--lightning-badge label={result}></!--lightning-badge-->  

                <c-result-component result={result}></c-result-component> 

        </div>

        <p class="slds-p-horizontal_small">

            <lightning-input value={firstNumber} name="fnumber" 

label="First Number" onchange={handleChanges}></lightning-input>

            <lightning-input value={secondNumber} name="snumber" 

label="Second Number" onchange={handleChanges}></lightning-input>

        </p>

    </lightning-card>

</template>

Reference:

https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A

https://developer.salesforce.com/tv/lwc-video-gallery/

https://developer.salesforce.com/docs/component-library/documentation/lwc/js_props_public

https://github.com/trailheadapps/lwc-recipes/blob/master/force-app/main/default/lwc