Custom Event in LWC.

Custom Event in LWC is same like Component Event in Lightning Component. Communicate from parent to child component can be done using passing property value or calling method of child component from parent component.
But if the communication is reverse i.e. communication from child to parent component then we can use Custom Event.
Here the technique is different with respect to Lighting Component.

In child component JS file, we have to CREATE and DISPATCH the the event.
To create an event, use the CustomEvent() constructor. And then we use dispatchEvent() method to dispatch the event.

customEventChildComp.html

<template>
    <lightning-button label="Pass message from child component" onclick={handleCustomEvent}></lightning-button>
</template>

customEventChildComp.js

import { LightningElement } from 'lwc';

export default class CustomEventChildComp extends LightningElement {
    handleCustomEvent(){
        //Use the CustomEvent() constructor to create an event. And always use event name in lower case.
        const myCustomEvent = new CustomEvent("displaymessage", { detail: "Message Passing from child component using custom event." });

        //Use dispatchEvent() method to dispatch the above created event.
        this.dispatchEvent(myCustomEvent);
    }
}

Now we can listen event from parent in 2 ways,

1. Declaratively from the component’s HTML template :
2. Programmatically using an imperative JavaScript API :

Note: It’s better to listen from the HTML template since it reduces the amount of code you need to write.

customEventParentComp.html

<template>
    <lightning-card title="Custom Event Example.">
            <lightning-layout>
                <lightning-layout-item>
                    {messageFrmChild}<br/>
                    <!-- Declaratively listen custom event. Use 'on' prefix before event name declared in child component named as 'displaymessage' -->

                    <c-custom-event-child-comp ondisplaymessage={handelMessageFromChild}></c-custom-event-child-comp>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

customEventParentComp.js

import { LightningElement, api } from 'lwc';

export default class CustomEventParentComp extends LightningElement {
    @api
    messageFrmChild;
    handelMessageFromChild(event){
        this.messageFrmChild = event.detail;
    }
}

customEventParentCompjs-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="customEventParentComp">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

Then open any existing appBuilder / create a new one and drag the <parentComponent> in to respective column and then save and activate it.  Now click the tab to show it in browser and it will look as follows,

Output ==>
Before calling event

After calling event by button click