Использование aura:method для передачи данных между компонентами

Для розробників Розробка з Lightning
1

В предыдущей статье События в Aura Components мы рассмотрели, как можно передавать данные между Aura Component при помощи Event. Теперь же попробуем передать данные при помощи aura:method.
Допустим, у нас есть некая иерархия компонентов, ParentMethodCmp содержит ChildMethodCmp и нам необходимо передать данные из ParentMethodCmp в
ChildMethodCmp, обработать их там и получить обратно.

Создадим ChildMethodCmp и добавим в него aura:method

<aura:component >
    <aura:method name="GetMessageFromChildMethod" action="{!c.getMessage}" access="public">
        <aura:attribute name="Name" type="String" default="Default attribute"/>
    </aura:method>
</aura:component>

Использование aura:method позволяет напрямую из родительского компонента вызывать методы из JS контроллера дочернего компонента без использования Event. Параметр name определяет имя используемое для вызова метода, параметр action метод из JS контроллера дочернего компонента, который вызывается.
Так как нам необходимо передать данные в дочерний компонент, то внутри aura:method мы используем aura:attribute для передачи параметра в методе.

Теперь определим метод getMessage() в JS контроллере дочернего компонента ChildMethodCmp

getMessage : function(component, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.Name;
            return "Do something with "+param1+" in Child Component";
        }
        return "";
}

Здесь при помощи строки

var params = event.getParam('arguments');

мы получаем параметры, переданные в метод (в нашем случае он один) и получаем его значение

var param1 = params.Name;

Здесь Name это значение атрибута name указанного при определении

<aura:attribute name="Name" type="String" default="Default attribute"/>

в aura:method.

Теперь определим ParentMethodCmp

<aura:component >
    <aura:attribute name="message" type="String" default="Default value"/>
    <aura:attribute name="someDataFromParent" type="String" default="Data From Parent"/>
    <c:ChildMethodCmp aura:id="childComponent"/>
  
    <div class="slds-m-around_xx-large">
        <lightning:button variant="brand" label="Call Aura Method" onclick="{!c.callAuraMethod}" />
        <BR></BR> <BR></BR>
        <p>{!v.message}</p>
    </div>
</aura:component>

Как видите, этот компонент содержит в себе компонент

<c:ChildMethodCmp aura:id="childComponent"/>

и кнопку, нажатие на которую обрабатывается методом callAuraMethod.

callAuraMethod : function(component, event, helper) {
            var dataFromParent = component.get("v.someDataFromParent");
            var childCmp = component.find("childComponent");
            var retnMsg = childCmp.GetMessageFromChildMethod(dataFromParent);
            component.set("v.message", retnMsg);
}

Здесь мы получаем значение атрибута родительского компонента someDataFromParent

var dataFromParent = component.get("v.someDataFromParent");

находим дочерний компонент

var childCmp = component.find("childComponent");

и вызываем метод из дочернего компонента, передавая туда данные из родительского компонента

var retnMsg = childCmp.GetMessageFromChildMethod(dataFromParent);

записываем полученный результат в атрибут message

component.set("v.message", retnMsg);

Осталось вставить ParentMethodCmp в aura:application и можно тестировать.

<aura:application extends="force:slds">
    <c:ParentMethodCmp/>
</aura:application>
4 Вподобання
2

супер полезная штука для работы с компонентами.