Let us Discuss here how to use the Lightning Web Component Methods. Use a JavaScript method to communicate down the containment hierarchy. For example, a parent component calls a method on a child component that it contains. Methods are part of a component’s API. Expose a method by adding the @api decorator to the method. To communicate up the containment hierarchy, fire an event in the child component with the dispatchEvent method, and handle it in the parent component. Please refer this link to Aura method
1. Create a Lightning web Component
Create a lightning web component using the below SFDX command
sfdx force:lightning:component:create --type lwc --componentname inputmethod --outputdir force-app\main\default\lwc
This component contains one method that will convert the text into the upper cases. This example exposes changeUpperCase(), methods in a c-inputmethod component by adding the @api decorator to the methods. A parent component that contains c-inputmethod can call these methods.
Use the below inputmethod.html code
<template>
Upper Case : {upperCase} <br/>
</template>
Use the below inputmethod.js code
import {
LightningElement,
api,
track
} from 'lwc';
export default class Inputmethod extends LightningElement {
@track upperCase;
@api
changeUpperCase(text) {
this.upperCase = text.toUpperCase();
}
}
Use the below inputmethod.js-meta.xml code
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ConditionalRendering">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
Call a Method
Now let’s see how to call the above method in the code The c-method caller component contains c-inputmethod that call the changeuppercase() method in input change. The this.template.querySelector() call is useful to get access to a child component so that you can call a method on the component.
Return Values
Use the return statement to return a value from a JavaScript method
@api
changeUpperCase(text) {
return 'value'
}
Method Parameters
To pass data to a JavaScript method, define one or more parameters for the method. For example, you could define the change()
method to take an input parameter.
@api change(inp) { … }
2. Create a Lightning Web Component
Create another that will be calling the method.
sfdx force:lightning:component:create --type lwc --componentname methodcaller --outputdir force-app\main\default\lwc
use the below methodcaller.html code
<template>
<lightning-card title="Container Cmp">
<lightning-layout>
<lightning-layout-item flexibility="auto">
<lightning-input label="Input Phrase" onchange={handleChange}></lightning-input><br />
</lightning-layout-item>
<lightning-layout-item flexibility="auto">
<h3> Method Source</h3>
<c-changecase></c-changecase>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
use the below methodcaller.js code
import {
LightningElement
} from 'lwc';
export default class Methodcaller extends LightningElement {
handleChange(event) {
this.template.querySelector('c-changecase').changeUpperCase(event.target.value);
}
}
Use the below methodcaller.js-meta.xml code
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ConditionalRendering">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
push the changes and add it to the page layout and you can able to see the output as shown below.
Beyond Cloud 