childLwc.html
<template>
<lightning-input onchange={handleChnage} type="number"
name="input1" label="Enter a number" >
</lightning-input>
</template>
childLwc.js
import { LightningElement, api } from "lwc";
export default class ChildLwc extends LightningElement {
@api progressValue;
handleChnage(event) {
this.progressValue = event.target.value;
// Creates the event with the data.
const selectedEvent = new CustomEvent("progressvaluechange", {
detail: this.progressValue
});
// Dispatches the event.
this.dispatchEvent(selectedEvent);
}
}
childLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childLwc">
<apiVersion>46.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
.........................................................................................................
parentLwc.html
<template>
<lightning-card title="Getting Data From Child">
<p class="slds-p-horizontal_small">
<lightning-progress-bar value={progressValue} size="large" >
</lightning-progress-bar>
<c-child-lwc onprogressvaluechange={hanldeProgressValueChange} >
</c-child-lwc>
</p>
</lightning-card>
</template>
parentLwc.js
import { LightningElement, track } from "lwc";
export default class ParentLwc extends LightningElement {
@track progressValue = 0;
hanldeProgressValueChange(event) {
this.progressValue = event.detail;
}
}
parentLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentLwc">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Demo
Deploy both the component to Your org and place it on page to see the results.
