0

childCompoLWC

<template>
  <lightning-card>
    Enter value:- <lightning-input type="text" value={strInput} onchange={handleChange}> 
  </lightning-input>
</lightning-card>
</template>

childCompoLWC.JS

import { LightningElement } from 'lwc';

export default class ChildCompoLWC3 extends LightningElement {

strInput;

handleChange(event){
    this.strInput = event.target.value;
   }
  }

parentCompoLWC

  <template>
     <lightning-card>
      <div class="slds-var-m-around_medium slds-box slds-theme_default">
        <c-child-compo-l-w-c-3></c-child-compo-l-w-c-3>
        <lightning-button variant="brand" label="Pass to Parent" onclick={PassToParent}> 
      </lightning-button>
       </div>
     </lightning-card>
   </template>

parentCompoLWC.JS

2 Answers 2

0

There are few ways to pass value from child to Parent:-

  1. Fire a custom event with payload from child and handle it in parent
  2. expose an public property in child and access it directly using querySelector

In your case, you can go for second approach, a sample code would be below:-

Step 1:- define public property in child

@api strInput;

step 2:- handle the button click as below:-

PassToParent(){
   let childtextboxvalue = this.template.querySelector('c-child-compo-l-w-c-3').strInput;
}
1
  • Thanks @sanketkumar.
    – Crazy XYZ
    Commented Jan 6, 2023 at 15:32
0

This can be done by calling a method of child component from parent lwc -

parent -

HTML - 

<c-child-compo-l-w-c-3 onsendtextboxvalue={handleValue}></c-child-compo-l-w-c-3>

JS - 

PassToParent() {
        this.template.querySelector('c-child-compo-l-w-c-3').sendTextBoxValue();
    }
    
handleValue(event){
 let textBoxValue = event.detail;
}

child -

JS - 
    @api sendTextBoxValue(){
            const selectEvent = new CustomEvent('sendtextboxvalue', {
                detail: this.strInput
            });
           this.dispatchEvent(selectEvent);
    }

1
  • Thanks @MukulMahawariya.
    – Crazy XYZ
    Commented Jan 6, 2023 at 15:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .