Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
<h1 style="font-size: 15px;">Aura Component: Firing Event</h1>
<c:registerEvent name="testevent" namespace="astro" aura:id="first-event"></c:registerEvent>
<lightning:button label="Fire Event From Aura" onclick="{!c.fireEvent}"></lightning:button>
</div>
</aura:component>
({
fireEvent : function(component, event, helper) {
component.find("first-event").publish('Fired Event from Aura Component.');
}
})
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="data" type="String" />
<div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;height: 120px;">
<h1 style="font-size: 15px;">Aura Component: Handling Event</h1>
<c:handleEvent pagereference="true" name="testevent" namespace="astro" onaction="{!c.handleEvent}"></c:handleEvent>
<br />
{!v.data}
</div>
</aura:component>
({
handleEvent : function(component, event, helper) {
component.set("v.data", event.getParam('payload') );
}
})
<template>
<div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
<h1 style="font-size: 15px;">LWC Component: Firing Event</h1>
<c-register-event pagereference name="testevent" namespace="astro" class="first-event"></c-register-event>
<lightning-button label="Fire Event From LWC" onclick={fireEvent}></lightning-button>
</div>
</template>
import { LightningElement } from 'lwc';
export default class Demo_component_1 extends LightningElement {
fireEvent(){
let cmp = this.template.querySelector('.first-event');
// cmp.publish('Fired Event from LWC.');
cmp.publishToNamespace('Fired Event from LWC.');
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="demo_component_1">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
<template>
<div style="padding: 20px;background: white;margin: 10px;border-radius: 4px;height: 120px;">
<h1 style="font-size: 15px;">LWC Component: Handling Event</h1>
<c-handle-event name="testevent" pagereference namespace="astro" class="event-class" onaction={handleEvent}></c-handle-event>
<c-handle-event name="testevent2" pagereference namespace="astro" class="event-class" onaction={handleEvent2}></c-handle-event>
<br/>
{data}
<lightning-button onclick={unregister} label="un"></lightning-button>
<lightning-button onclick={register} label="re"></lightning-button>
</div>
</template>
import { LightningElement,track ,wire} from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
export default class Demo_component_2 extends LightningElement {
@track data;
handleEvent(event){
this.data += event.detail.payload;
}
handleEvent2(event){
this.data += event.detail.payload+'2';
}
unregister(){
this.template.querySelector('.event-class').unsubscribe();
}
register(){
this.template.querySelector('.event-class').subscribe();
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="demo_component_2">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.