function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
DJ 367DJ 367 

Bubble Phase is not fetching the proper value from child component in LWC

Hi ,

I am trying to pass value from child component to GrandChild. I am getting the value in Parent but not in GrandParent. In GrandParent I am able to alert anything but when I alert the value from child component then it not printing, it says " Name is  : undefined".

Here is my code --

<!--- Child Component bubblePhseChld-->
<!--- Child Component bubblePhseChld--> 
<template>
    <!-- Bubbule Phase example-->
    <div class="slds-m-around_small">
        <lightning-button label="Child Button"
                          variant="brand"
                          onclick={handleChildEvent}>
                        </lightning-button>
    </div>
</template>

----------

import { LightningElement,api } from 'lwc';

export default class BubblePhseChld extends LightningElement {
    @api Name = "James";
    @api Age = 22;
    @api Country = "India";

    handleChildEvent(event){

        const selectedEvent  = new  CustomEvent("condidate",
            {
                bubbles : true,
                composed : true
            }
        
        );

        this.dispatchEvent(selectedEvent);
            

    }
}

Parent Cmp
 
<!-- Parent Component: bubblePhseParent -->

<template>
    <div oncondidate={handleParentEvent}> 
        <c-bubble-phse-chld ></c-bubble-phse-chld>
    </div>
</template>

------------
import { LightningElement } from 'lwc';

export default class BubblePhseParent extends LightningElement {

    handleParentEvent(event){
        alert('Hi Im in Parent');
        alert(' Name is  : ' + event.target.Name);
        alert(' Age is  : ' + event.target.Age);
        alert(' country is  : ' + event.target.Country);
    }
}

GrandParent
 
<!-- bubblePhseGrandParent -->

<template>
    <div oncondidate={handleGrandEvent}>
             <c-bubble-phse-parent ></c-bubble-phse-parent> 
          
    </div>
</template>

------
import { LightningElement } from 'lwc';

export default class BubblePhseGrandParent extends LightningElement {

    handleGrandEvent(event){
        alert('Hi Im in Grand Parent');
        alert(' Name is  : ' + event.target.Name);
        alert(' Age is  : ' + event.target.Age);
        alert(' country is  : ' + event.target.Country);
    } 

}

​​​​​​​
Danish HodaDanish Hoda
Hi there,
This is because you need to fire the event condidate from bubblePhseParent to reach bubblePhseGrandParent
DJ 367DJ 367
Hi Danish,

I am already passing here
<div oncondidate={handleGrandEvent}> <c-bubble-phse-parent ></c-bubble-phse-parent> </div>

Can you please help me with code.