<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