How to refresh the Parent component after a button on child component is pressed?

Question

Problem: I need to have the parent component to make another Apex call, apiCallout(), after the save button is clicked on the child component. That way the UI is displaying current data, however the current setup requires me to refresh the page after the save button is clicked to show the updated data. Would I need to send a variable in my custom event on handleClickedSave() to have the parent component make another apex callout?

Parent HTML:

<c-view var1={var1}></c-view>
<c-edit var1={var1}></c-edit>

Parent JS:

var1
async apiCallout(){
var2 = var1;
let payload = JSON.stringify({"test":var2});
this.var1 = await calloutToApi({params:payload});
}
connectedCallBack(){
apiCallout()
}

Child View HTML:

<template>
        <lightning-card  title="Hello">
            <lightning-button label="Edit" slot="actions" onclick={handleClickedEdit}></lightning-button>
            <p class="slds-p-horizontal_small">Card Body {var1}</p>
        </lightning-card>
</template>

Child View JS:

@api var1;
handleClickedEdit(){
//sends custom event to Parent to show Edit screen
}

Child Edit HTML:

<template>
        <lightning-card  title="Hello">
            <lightning-button label="Cancel" slot="actions" onclick={handleClickedCancel}></lightning-button>
            <lightning-button label="Save" slot="actions" onclick={handleClickedSave}></lightning-button>
            <lightning-input type="text" label="Enter some text" value={var1}></lightning-input>
        </lightning-card>
</template>

Child Edit JS:

@api var1

handleClickedSave(){
//custom event to send to parent to show View Screen with Apex callout
sendUpdatePayloadToApi({params:var1})
}
handleClickedCancel(){
//custom event to send to parent to show View Screen without Apex callout
}

Answer 1

The child should notify the parent via an event:

// child.js
async handleClickedSave(){
  //custom event to send to parent to show View Screen with Apex callout
  await sendUpdatePayloadToApi({params:var1})
  this.dispatchEvent(
    new CustomEvent('recordsaved')
  )
}

---

<!-- parent.html -->
<c-edit onrecordsaved={refreshData}></c-edit>

---

// parent.js
async refreshData() {
  await this.apiCallout();
}