You need to sign in to do that
Don't have an account?

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-->
Parent Cmp
GrandParent
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); } }
This is because you need to fire the event condidate from bubblePhseParent to reach bubblePhseGrandParent
I am already passing here
<div oncondidate={handleGrandEvent}> <c-bubble-phse-parent ></c-bubble-phse-parent> </div>
Can you please help me with code.