Onload attribute for new base components - how do we mimic this functionality?

Question

I'm trying to mimic the onload attribute seen here on lightning:recordEditForm but I'm not sure this is possible. Ideally, I'd like to implement this pattern:

Child Component (UserDataService.cmp)

<aura:component controller="UserDataService">
  <aura:attribute name="onload" type="Aura.Action"/>
  <aura:attribute name="userInfoCache" type="Object" description="Current user info, system today, system now etc."/>
  <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
  <aura:handler name="change" value="{! v.userInfoCache }" action="{! c.onload }"/>
</aura:component>

Controller

({
  doInit : function(component, event, helper) {
    helper.fetchUserAndSystemInfo(component); // sets v.userInfoCache
  },
  onload : function(component, event, helper) {
    return event.getParam("value"); // this is definitely not right, but not sure how to "return" this back to
  }
})

Parent Component (SomeParentThatNeedsUserData.cmp)

<!-- i want to fire onload when the attribute resolves on the child -->
<c:GC_UserDataService onload="{! c.handleUserDataServiceLoad }"/>
<aura:attribute name="userInfoCache" type="Object"/>

Parent Controller

handleUserDataServiceLoad : function(component, event, helper) {
  console.log("handleUserDataServiceLoad"); // never gets called
  console.log(event.getParam("userInfoCache"));
  component.set("v.userInfoCache", event.getParam("userInfoCache"));
},

I know that you can fire an event from the child and listen to it on the parent, but I want to listen to it only the context of the onload function to mimic the onload attribute.

I also know you can also two-way bind v.userInfoCache from child to parent (parent to child) so when it gets loaded, the reference is filled in both. But, doing this it's not apparent that something is "loading" inside my child and when it's done to handle the returned value explicitly.

Answer 1

It's recommended that you don't use Aura.Action. Instead, register an event:

<aura:registerEvent name="onload" type="c:onload" />

Then, in your change handler, you would fire an event off:

onload: function(component, event, helper) {
    component.getEvent("onload")
    .setParams({ value: event.getParam("value") })
    .fire();
}

You will need to define an onload event bundle:

<aura:event type="COMPONENT">
    <aura:attribute name="value" type="Object" />
</aura:event>

You can read more in Handling Custom Events in the Lightning Component Framework and the documentation.

Note: the name of the event and the name of the handler do not need to match; I usually do this for convenience. The name of the aura:registerEvent will be exposed as an "attribute" on the component (like in your first section of code).