Calling Component Methods

Use this syntax to call a method in JavaScript code.

1cmp.sampleMethod(arg1, … argN);

cmp is a reference to the component. arg1, … argN is an optional comma-separated list of arguments passed to the method.

Let’s look at an example of a component containing a button. The handler for the button calls a component method instead of firing and handling its own component event.

Here is the component source.

1<!--c:auraMethod-->
2<aura:component>
3    <aura:method name="sampleMethod" action="{!c.doAction}" access="PUBLIC"
4      description="Sample method with parameters"> 
5        <aura:attribute name="param1" type="String" default="parameter 1" /> 
6    </aura:method>
7
8    <ui:button label="Press Me" press="{!c.handleClick}"/>
9</aura:component>

Here is the client-side controller.

1/*auraMethodController.js*/
2({
3    handleClick : function(cmp, event) {
4        console.log("in handleClick");
5        // call the method declared by <aura:method> in the markup 
6        cmp.sampleMethod("1");
7    },
8
9    doAction : function(cmp, event) {
10        var params = event.getParam('arguments');
11        if (params) {
12            var param1 = params.param1;
13            console.log("param1: " + param1);
14            // add your code here
15        }
16    },
17})

This simple example just logs the parameter passed to the method.

The <aura:method> tag set name="sampleMethod" and action="{!c.doAction}" so the method is called by cmp.sampleMethod() and handled by doAction() in the controller.