实现操作并设计子组件

您可以通过调用其指定的操作方法在父组件上实现操作，并在子组件中为指定的操作方法创建逻辑。

语法

可以按以下方式实现操作 −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //代码在这里
      }
   }
});

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

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

示例

下面给出的示例指定在应用程序中实现操作和设计子组件。创建一个名为 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 服务器；您将收到以下输出 −

单击"显示"按钮时，它将显示文本；单击"隐藏"按钮时，它将隐藏文本 −

emberjs_component.html