Child To Parentcomponent

Custom Event Passing data 

ChildtoParentcomponent Html

-----------------------

<template>

<lightning-card  title="Child to parent communication">

<div class="slds-var-m-around_medium" onclose = {closeHandler}>

<lightning-button variant="base" label="Show Model"  onclick={clickHandler}></lightning-button>

<template if:true={Showmodel}>

<c-childto-parent-model-component ></c-childto-parent-model-component>

</template>

<h1>{msg}</h1>

</div>

</lightning-card>

</template>

javaScript

----------

import { LightningElement } from 'lwc';

export default class ChildtoParentComponentEvent extends LightningElement {

     Showmodel = false

     msg

     clickHandler(){

         this.Showmodel = true

     } 

     closeHandler(event){

         this.msg = event.detail.msg

         this.Showmodel = false

     }

}

childtoparentcomponentmodel html

<template>

<lightning-card  title="Hello">

  <section role="dialog" tabindex="-1" aria-modal="true" 

aria-labelledby="modal-heading-01" 

class="slds-modal slds-fade-in-open slds-modal_small">

<div class="slds-modal__container">

<div class="slds-modal__header">

<h1 id="modal-heading-01"

 class="slds-modal__title slds-hyphenate">Confirmation</h1>

</div>

<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

<p>Successfully Created!!</p>

</div>

<div class="slds-modal__footer" onclick={footerHandler}>

<button class="slds-button slds-button_neutral"

 onclick={CloseHandler}>OK</button>

</div>

</div>

</section>

<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>  

</lightning-card>

</template>

ChildtoParentModelComponent javaScript

------------

import { LightningElement } from 'lwc';

export default class ChildtoParentModelComponent extends LightningElement {

CloseHandler(){

       const myEvent= new CustomEvent('close',{

           bubbles:true,

           detail: {

               msg: 'Model Closed Successfully!!'

           }

       })

       this.dispatchEvent(myEvent)

}

footerHandler(){

        console.log('Footer Handler Event');

}

}