ONLOAD IN AURA VS LIGHTNING WEB COMPONENT
If we embedded LWC component inside the aura component which onload method will call first (doinit/connectCallback)?. For understanding this we are going to create two Lightning components.
- customAuraComponent – Aura Component
- customLwc – LWC Component.
Step 1: Create customAuraComponent (Developer console -> New -> LightningComponent)
customAuraComponent
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,force:hasRecordId,
forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doinit}"></aura:handler>
<lightning:card title="Cutsom Aura Component"></lightning:card>
<!-- LWC Component -->
<c:customLwc/>
</aura:component>
Javascript
doinit:function(component, event, helper) {
console.log('onload:aura component')
}
Step 2: Create LWC component
customLwc
<template>
<p> LWC Component</p>
</template>
Javascript
import { LightningElement } from 'lwc';
export default class CustomLwc extends LightningElement {
connectedCallback(){
console.log("onload:LWC Component");
}
}
XML:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Result :