组件就像一个相对独立的盒子。在前面的文章中介绍过组件是怎么通过属性传递参数，并且这个属性值你可以在模板或者js代码中获取。

但是到目前为止还没介绍过子组件从父组件中获取数组，在Ember应用中组件之间的通信是通过actions实现的。

跟着下面的步骤来，创建一个组件之间通信的示例。

1，创建组件

创建组件的方法不用我多说，直接使用Ember CLI命令创建即可。

1
2
3
ember g component button-with-confirmation
ember g component user-profile
ember g route button-with-confirmation-route

为了测试方便多增加了一个路由。

下面是组件user-profile的定义，调用组件button-with-confirmation，那么此时user-profile作为父组件，button-with-confirmation作为子组件：

1
2
3
<!--  app/temlates/components/user-profile.hbs  -->

{{button-with-confirmation text="Click OK to delete your account"}}

2，在组件类中添加action

要想action能执行需要作如下两步：

  • 在父组件中定义好需要处理的动作（action）。在这个例子中父组件的动作是要删除用户账号并发送一个提示信息到另一个组件。
  • 在子组件中，判断发生什么事件并发出通知信息。在这个例子中当用户点击“确认”按钮之后触发一个外部的动作（删除账户或者发送提示信息）。

下面是实现代码：

实现父组件动作（action）

在父组件中，定义好当用户点击“确认”之后触发的动作。在这个例子中的动作（action）是先找出用户账号再删除。

在Ember应用中，每个组件都有一个名为actions的属性。这个属性值是函数，是可以被用户或者子组件执行的函数。

1
2
3
4
5
6
7
8
9
10
11
//  app/components/user-profile.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        userDidDeleteAccount: function() {
            console.log(“userDidDeleteAccount⋯”);
        }
    }
});

现在已经实现了父组件逻辑，但是并没有告诉Ember这个动作什么时候触发，下一步将实现这个功能。

实现子组件动作（action）

这一步我们将实现当用户点击“确定”之后触发事件的逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
//  app/components/button-with-confirmation.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在这里获取父组件的事件（数据）并触发
        }
    }
});

3，传递action到组件中

现在我们在user-profile组件中使用onConfirm()方法触发组件button-with-confirmation类中的userDidDeleteAccount事件。

1
2
3
4
5
<!--  app/temlates/components/user-profile.hbs  -->

{{#button-with-confirmation text="Click OK to delete your account" onConfirm=(action 'userDidDeleteAccount')}}
执行userDidDeleteAccount方法
{{/button-with-confirmation}}

这段代码的意思是告诉父组件，userDidDeleteAccount方法会通过onConfirm方法执行。

现在你可以在子组件中使用onConfirm方法执行父组件的动作。

1
2
3
4
5
6
7
8
9
10
11
12
13
//  app/components/button-with-confirmation.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'button',
    click: function() {
        if (confirm(this.get('text'))) {
            // 在父组件中触发动作
            this.get('onConfirm')();
        }
    }
});

this.gete(“onConfirm”)从父组件返回一个值onConfirm，然后与()组合成了一个个方法onConfirm()。

在模板button-with-confirmation-route.hbs中调用组件。

1
2
3
<!--  app/temlates/button-with-confirmation-route.hbs  -->

{{user-profile}}

结果

点击这个button，会触发事件。弹出对话框。再点击“确认”后执行方法userDidDeleteAccount，可以看到浏览器控制台输出了userDidDeleteAccount⋯，未点击“确认”前或者点击“取消”不会输出这个信息，说明不执行这个方法userDidDeleteAccount。

结果截图

结果截图

像普通属性，actions可以组件的一个属性，唯一的区别是，属性设置为一个函数，它知道如何触发的行为。

在组件的actions属性中定义的方法，允许你决定怎么去处理一个事件，有助于模块化，提高组件重用率。

到此，组件这一章节的内容全部介绍完毕了，不知道你看懂了多少？如果有疑问请给我留言一起交流学习，获取是直接去官网学习官方教程。


博文完整代码放在[Github](https://github.com/ubuntuvim/my_emberjs_code)（博文经过多次修改，博文上的代码与github代码可能有出入，不过影响不大！），如果你觉得博文对你有点用，请在github项目上给我点个`star`吧。您的肯定对我来说是最大的动力！！