LWC – Pass event to Aura Component

auralightning-web-components

I am trying to pass an event to my parent aura component however the message within the event is always undefined.

Aura:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <lightning:card title="Aura Hello World" />
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="messageFromLwc" type="String"/>
    <c:template_Window_Navigation_VF name="testName" ontestEvent="{!c.handlefireEvent}"/>
    Message from LWC: {!v.messageFromLwc}
</aura:component>

({
    handlefireEvent : function(component, event, helper) {
        var message = event.getParam('testMessage');
        component.set("v.messageFromLwc", message);
        console.log('event.getParam:', event.getParam('testMessage'));
    }
})

LWC:

<template>
    <lightning-card title="LWC Hello World">
        <div class="slds-card__body slds-card__body_inner">
            Hello, {name}!
            <lightning-button label="Fire Event" title="FireEvent" onclick={fireEvent} class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';

export default class Template_Window_Navigation_VF extends LightningElement {
    @api name;

    fireEvent(event){
        const selectedEvent = new CustomEvent('testEvent', { testMessage: 'Hi there' });
        this.dispatchEvent(selectedEvent);
    }
}

Best Answer

try sending your data using the detail property on the event's payload, something like this:

const selectedEvent = new CustomEvent('testevent', { detail: { testMessage: 'Hi there' }});

instead of this:

const selectedEvent = new CustomEvent('testEvent', { testMessage: 'Hi there' });

as you can see on Send Events to an Enclosing Aura Component article. Also, one of the suggested best practices is to avoid upper cases on the event's name, as described in the Create and Dispatch Events article.

Hope it helps.

Related Solutions

[SalesForce] Dispatched event not firing in parent aura component

As another possible issue, you have a naming convention error.

LWC automatically forces the LWC Class name to Pascal Case, but you have a dueling format right now:

LWC class of HelloWorld <- this is Pascal Case
LWC JS of helloworld.js <- This is not, it should be helloWorld, capital W.
Template of helloworld.html (embedded in aura)

I just tried this and it works fine, notice the naming convention of the LWC file and its class. Everything is lowercase.

helloworld.js

import { LightningElement } from 'lwc';

export default class Helloworld extends LightningElement {
  connectedCallback() {
    const payload = {
      "hello": "test"
    }
    this.dispatchEvent(
      new CustomEvent('filterchange', {
        detail: { payload }
      })
    );
  }
}

AuraListener.cmp

<c:helloworld onfilterchange="{! c.handleChange }"></c:helloworld>

AuraListenerController.js

handleChange : function(component, event, helper) {
  let payload = event.getParam("payload");
  console.log(payload.hello) // outputs test
}

[SalesForce] Capturing event from LWC in Aura Component

You can add event listener like below:

$A.createComponent(
        'c:myCustomChild',
        {
            onsubmitsuccess: component.getReference("c.handleSubmitSuccess"),
            quoteVariationId: angebotsvarianteId
        },
        function(newCustomPosCreate, status, errorMessage) {
            if (status === 'SUCCESS') {
                // -------- process callback-------------                    
            } else {
                console.log('Status: ' + status);
                console.log('Errors: ' + errorMessage);
            }
        }
    );

Now implement handleSubmitSuccess

handleSubmitSuccess : function(component, event, helper) {
    console.log('Event has been caught');
    //if you are passing data in detail of event
    //console.log(event.getParam("--data--"));
}

Additional info: In LWC, there is no concept of creating event component/register-event/handler-event.

You just dispatch event like this:

this.dispatchEvent(new CustomEvent('myevent', {
    detail: {
        data: someData
    }
}));

to handle this in parent LWC component:

<c-child-comp onmyevent={handleEvent}></c-child-comp>

to get the data from event in handler

handleEvent = event => { let myData = event.detail.data; }

For parent AURA component:

<c:childComponent onmyevent="{!c.handleEvent}"></c:childComponent>

to get data in handler:

handleEvent(cmp,event){ let myData = event.getParam('data'); }

Note: 1. You can also use addEventListener. But I think above method is less confusing.
2. Use bubble, composed and cancellable carefully. Read documentation before using them.
3. When you dispatch custom event, you need to add "on" before event name/type if you are handling event directly during declaration. Or else if you are using addEventListener in parent component javascript, you need to use event name as is.

Best Answer

Related Solutions

[SalesForce] Dispatched event not firing in parent aura component

[SalesForce] Capturing event from LWC in Aura Component

Related Topic