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:one_register_event name="testevent" namespace="astro" aura:id="first-event"></c:one_register_event>
<lightning:button label="Fire Event From Aura" onclick="{!c.fireEvent}"></lightning:button>
</div>
</aura:component>
({
fireEvent : function(component, event, helper) {
component.find("first-event").fire('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:one_event_handler name="testevent" namespace="astro" onaction="{!c.handleEvent}"></c:one_event_handler>
<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-one_register_event name="testevent" namespace="astro" class="first-event"></c-one_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(){
this.template.querySelector('.first-event').fire('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-one_event_handler name="testevent" namespace="astro" onaction={handleEvent}></c-one_event_handler>
<br/>
{data}
</div>
</template>
import { LightningElement,track } from 'lwc';
export default class Demo_component_2 extends LightningElement {
@track data;
handleEvent(event){
this.data = event.detail.payload;
}
}
<?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.