实施行动和设计子组件（Implementing Action and Designing Child Component）

优质

小牛编辑

132浏览

2023-12-01

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

语法 (Syntax)

该行动可按下文所述实施 -

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

子组件可以在以下代码行中实现 -

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

例子 (Example)

下面给出的示例指定在应用程序中实现操作和设计子组件。使用名称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 xnip...</h2>
{{/if}}
<button {{action "cancelBody"}}>{{title}}Hide (Hides Text)
</button>
{{yield}}

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

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

输出 (Output)

运行ember服务器; 你会收到以下输出 -

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