Communication from Child Lightning Web Component to the Parent LWC through event

Lightning Web Components work in similar ways as the Lightning Components, where data is sent from Parent component to the Child, discussed here and also from the Child to the Parent through events.

The scenario in discussion here is : We have some Account records in a table on the Child component, we need the Name of the selected Account on the Parent component.

--------------- Child LWC ---------------

.html :

<template>
 <lightning-card title="Child CMP" icon-name="custom:custom4">
                
  <table class="slds-border_top slds-border_bottom slds-border_right slds-border_left slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
                        
   <thead  >
     <tr class= "slds-line-height_reset" style="width:5000px">
       <th scope="col" style="background-
       color:rgb(84,105,141);width:120px">
       <div class="Greetingdetail1"   title="">
        <p style="color:white;">Select</p></div></th>
       <th scope="col"   style="background-
        color:rgb(84,105,141);width:120px">
       <div class="Greetingdetail1"   title="">
       <p style="color:white;">Account Name</p></div></th>
    </tr>
   </thead>

 <template for:each={fetchedAccounts} for:item='item'>
  <tbody key={item.value}>
   <tr >    
    <td>
     <lightning-input type="radio" name={item.Name} 
     value={item.Id} onclick={eventtrigger}></lightning-input>
    </td>
    <td style="width:1px;white-space:nowrap;">
    <div class="Greetingdetail" title="" >
     <p style="width:120px">{item.Name}</p>
    </div>
    </td>
   </tr>
  </tbody>
 </template>
 </table>
 </lightning-card>
</template>

.js :

import { LightningElement, wire, track, api } from 'lwc';
import accounts from '@salesforce/apex/AccountHandler.fetchAccounts';
//fetchAccounts is the method on AccountHandler class
export default class ChildLWC extends LightningElement {

    @track fetchedAccounts = [];
    @wire(accounts,{})
    records({error,data}){
     if(data){
         for(var i=0; i<data.length; i++){
            this.fetchedAccounts.push(data[i]);
        }
      if(error){
        this.fetchedAccounts= [];
      }
     }
    }

 @track dataOnChild;
 eventtrigger(event){
     var data = event.currentTarget.name;
     // eslint-disable-next-line no-console
     console.log("-->> "+ data);
     this.dispatchEvent(new CustomEvent
      ('childevent', {detail: data})
     );
 //childevent is the name of the event getting fired to send the
   //Account Name of the selected record
 //Note: Always use the lower-case letters for the event name.
 }

}


--------------- Parent LWC ---------------

.html :

<template>
    <lightning-card title="ParentLWC" icon-name="custom:custom3">
<lightning-card icon-name="custom:custom92">
 <b><h1>
  <lightning-formatted-text value={dataFromChild}>
  </lightning-formatted-text>
 </h1></b>
    </lightning-card>
    <div>
        <c-child-L-W-C onchildevent={getDataFromChild}>
        </c-child-L-W-C>
 <!-- add "on" before the event name on child component 
 the getDataFromChild method is called when the event is registered on the Parent componenet -->
    </div>
   </lightning-card>
</template>

.js :

import { LightningElement, track, wire } from 'lwc';
export default class ParentLWC extends LightningElement {
@track dataFromChild;
    getDataFromChild(event){
        // eslint-disable-next-line no-console
        console.log("-->> "+event.detail);
        this.dataFromChild = event.detail;
    }
}

Details available at:
https://developer.salesforce.com/docs/component-library/documentation/lwc/events_create_dispatch