实现 action 并设计子组件

你可以通过调用父组件的指定 action 方法在父组件上实现 action，并在子组件中为指定的 action 方法创建一个逻辑。

语法

action 可按如下所示实现 −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //code here
      }
   }
});

子组件可按以下代码行实现 −

<tag_name {{action "action_name"}}>{{Text Here}}</end_of_tag>

示例

下面给出的示例指定在你的应用程序中实现 action 和设计子组件。使用名称 ember-actions 创建一个组件，并打开在 app/components/ 下创建的组件模板文件 ember-actions.js，其中包含以下代码 −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      toggleBody() {
         this.decrementProperty('isShowingBody');
      },
      cancelBody() {
         this.incrementProperty('isShowingBody');
      }
   }
});

打开在 app/templates/components/ 下创建的 ember-actions.hbs 文件，并输入以下代码 −

<button {{action "toggleBody"}}>{{title}}Show (Display Text)</button>
{{#if isShowingBody }}
   <h2>Welcome to Tutorialspoint...</h2>
{{/if}}
<button class="confirm-cancel" {{action "cancelBody"}}>{{title}}Hide (Hides Text)
</button>
{{yield}}

创建 application.hbs 文件，并添加以下代码 −

{{ember-actions}}
{{outlet}} 

输出

运行 ember 服务器；你将收到以下输出 −

当你单击“显示”按钮时，它将显示文本并在单击“隐藏”按钮时隐藏文本 −