LWC child to parent communication

Question

parent.html

<a href="" onclick= {handleclick}> click here</a>
<c-modal open = {openModal}>

Paren.js

@track openModal;

  handleclick(){

   this.openModal = true;
}

when I close the Modal in the "modal" component , how do I communicate it back to the parent component or how do I change back the value of reactive property to false after click operation.

Answer 1

Can use custom events. Example: hmtl

<a href="" onclick= {handleclick}> click here</a>
<c-modal onclose={handleModalClosed} open = {openModal}>

js

@track openModal;

  handleclick(){

   this.openModal = true;
  }

  handleModalClose() {
   this.openModal = false;
  }

c-modal:

closeModal() {
  //do modal close stuff
  this.dispatchEvent(new CustomEvent('close'));
}

Answer 2

Child-to-parent communication is always done with events.

<c-modal open={openModal} onclose={notifyClose}></c-modal>

...

// in modal
this.dispatchEvent(new CustomEvent('close'));

...

// in parent
notifyClose() {
    this.openModal = false;
}