Passing a method as parameter from a parent LWC to a chil LWC

Question

Hello,

I develop on an existing LWC and there is something I don't understand. There are 2 custom LWC and the parent LWC calls the child LWC by passing a method (from him) as a parameter the child LWC.

This is the call:

<c-child-component
    onrefreshsalesassociates={handleRefreshSalesAssociates}

"handleRefreshSalesAssociates" is a method in the parent LWC but not in the child LWC, it is not a variable.

My question is what is "onrefreshsalesassociates"? I can't find anything in the parent LWC and in the child LWC.

Do you know what it is and how it is used please (or maybe a keyword to give me the opportunity to search on the internet)?

Thanks

Answer 1

Inside a component's markup, the on prefix is reserved for event handlers (e.g. you can't declare a variable called onsuccess). Inside the component that is dispatching the event, you'll find code similar to the following:

const event = new CustomEvent("refreshsalesassociates");
this.template.dispatchEvent(event);

Events are the standard way for a child to communicate with its parent. To pass data from a parent to a child, it is typical to use public properties.

import { LightningElement, api } from 'lwc';
export default class MyComponentName extends LightningElement {
  @api myProperty;
}

Which is then set by a property in kebab-case, as specified in the documentation.

<c-my-component-name my-property={someParentVariable}>
</c-my-component-name>