Pass data or parameters from child to parent component in LWC Salesforce

In this post i will explain how to pass parameters from child component to parent component in LWC salesforce.

parentComp.cmp :

<template>

    <div style ="padding: 30px; background-color: white;">

        <div><b>Parent Div</b></div>

        <div>Input typed in child component is : <b>{childOutput}</b></div>

    </div>

      <c-child-comp onpass={showValue}></c-child-comp>

</template>

parentComp.js :

import { LightningElement } from 'lwc';

export default class ParentComp extends LightningElement {

    childOutput;

    showValue(event)

    {

         this.childOutput = event.detail;

    }

}

childComp.cmp :

<template>

    <div style ="margin-top:10px; background-color:wheat; padding: 30px;">

        <div>

            <b>Child Div</b>

        </div>

        <lightning-input type="text" label="Enter some text in child div" onchange={handleChnge}></lightning-input>

    </div>

</template>

childComp.js :

import { LightningElement, track } from 'lwc';

export default class ChildComp extends LightningElement {

    @track value;

    handleChnge(event){

        this.value = event.target.value;

        this.dispatchEvent( new CustomEvent( 'pass', {

            detail: this.value

        } ) );

    }

}

Thanks, 
Lovesalesforceyes