从另一个闪电组件调用闪电组件

在 Lightning 组件开发中，经常会遇到需要在当前组件中调用另一个闪电组件的情况。下面我们来介绍如何实现从另一个闪电组件调用闪电组件。

在组件中引用其他组件

要想在当前组件中调用其他组件，首先需要在组件中引用要调用的组件。可以通过 c 命名空间来引用其他组件。例如，要引用名为 myComponent 的组件，可以将以下代码添加到当前组件的模板中：

<c:myComponent />

这将在当前组件中创建一个名为 myComponent 的子组件。子组件的类型将是 c:myComponent。

从父组件中访问子组件

在当前组件中引用另一个组件后，就可以通过子组件标识符来调用子组件中的方法或属性。可以使用 aura:id 属性给子组件指定一个标识符，然后在父组件中通过该标识符访问子组件。例如，要在当前组件中调用名为 doSomething 的子组件方法，可以添加以下代码：

// 获取子组件
var childCmp = component.find('childCmp');
// 调用子组件方法
childCmp.doSomething();

在上面的代码中，component.find 方法用于获取具有指定 aura:id 的子组件。然后，可以通过所返回的子组件引用调用子组件中的方法。

从子组件中访问父组件

要从子组件中访问父组件中的方法或属性，可以使用 event 机制。子组件通过分发 aura:registerEvent 定义一个事件，然后在父组件中监听该事件。当子组件触发该事件时，父组件将接收到该事件并执行相应的操作。

以下是一个示例，展示了如何从子组件中发出一个事件，然后在父组件中监听该事件：

子组件代码

<!-- 子组件代码 -->
<aura:component>
    <!-- 定义子组件事件 -->
    <aura:registerEvent name="childEvent" type="c:myEvent" />
    <aura:attribute name="message" type="String" default="Hello, world!" />
    <aura:handler name="change" value="{!v.message}" action="{!c.doSomething}" />
    <aura:method name="doSomething" action="{!c.handleDoSomething}" />
    <button onclick="{!c.handleClick}">Click me!</button>
</aura:component>

<!-- 定义子组件事件的结构 -->
<aura:event type="COMPONENT" description="Template event">
    <aura:attribute name="payload" type="String" />
</aura:event>

在子组件中，定义了一个名为 childEvent 的 aura:registerEvent，该事件类型为 c:myEvent。然后，在子组件中定义了一个方法 handleClick，该方法通过以下代码触发 childEvent 事件：

// 发送子组件事件
var childEvent = component.getEvent('childEvent');
childEvent.setParams({
    'payload': 'Hello from child!'
});
childEvent.fire();

在上面的代码中，首先通过 component.getEvent 方法获取名为 childEvent 的事件，然后使用 setParams 方法设置事件参数。最后，使用 fire 方法触发事件。此时， childEvent 事件将被分发，且父组件可以监听该事件。

父组件代码

<!-- 父组件代码 -->
<aura:component>
    <c:myComponent aura:id="myChild" />
    <aura:handler event="c:myEvent" action="{!c.handleChildEvent}" />
</aura:component>

在父组件中，引用了名为 myComponent 的子组件，并使用 aura:id 属性将其命名为 myChild。然后，父组件通过以下代码监听子组件事件：

// 监听子组件事件
handleChildEvent: function(component, event, helper) {
    var payload = event.getParam('payload');
    alert('Message received from child: ' + payload);
}

在上面的代码中，父组件定义了一个名为 handleChildEvent 的方法，此方法用于处理 c:myEvent 事件。当子组件触发 childEvent 事件时，该事件将被捕获且 handleChildEvent 方法将被调用。

总结

以上介绍了从另一个闪电组件调用闪电组件的方法。通过使用 aura:id 属性以及 component.find 和分发事件的方法，您可以在组件中相互通信。