To communicate from child to parent, dispatch an event.
Lightning web components fire DOM events.
An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can.
In Aura, you add components into facets. In Lightning web components, you add components into slots.
Facet:
<aura:component implements="flexipage:availableForAllPageTypes">
<c:lwcCompo1 />
<c:lwccompo2 />
</aura:component>
Slots:
<template>
<c-lwcComp></c-lwcComp>
.....
</template>
Example/Syntax:
In Aura:
Component:
JavaScript:
Lightning web components fire DOM events.
An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can.
In Aura, you add components into facets. In Lightning web components, you add components into slots.
Facet:
<aura:component implements="flexipage:availableForAllPageTypes">
<c:lwcCompo1 />
<c:lwccompo2 />
</aura:component>
Slots:
<template>
<c-lwcComp></c-lwcComp>
.....
</template>
Example/Syntax:
const filterChangeEvent = new CustomEvent('filterchange', {
detail: { filters },
});
// Fire the custom event
this.dispatchEvent(filterChangeEvent);
In Aura:
Component:
<lightning:layout>
<lightning:layoutItem size="4">
<!-- This is an LWC component -->
<c:categoryFilter onfilterchange="{!c.handleFilterChange}"/>
</lightning:layoutItem>
<lightning:layoutItem size="8" class="slds-p-left_medium">
{!v.message}
</lightning:layoutItem>
</lightning:layout>
JavaScript:
handleFilterChange: function(component, event) {
var filters = event.getParam('filters');
component.set('v.message', filters.length > 0 ? 'Your selection : '
+ filters.join() : 'No selection'); },
+ filters.join() : 'No selection'); },
Comments
Post a Comment