当前位置: 首页 > 文档资料 > EmberJS 入门教程 >

section

优质
小牛编辑
132浏览
2023-12-01

您可以使用事件处理程序将操作从组件发送到应用程序。

语法 (Syntax)

{{comp_name action = "name_of_action"}}

例子 (Example)

下面给出的示例指定从组件向应用程序发送操作。 使用名称comp-yield创建一个组件,并使用以下代码打开在app/components/下创建的组件模板文件comp-yield.js -

import Ember from 'ember';
export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Hello...Welcome To xnip...");
         //sendAction() method sends the specified action when the component is 
            used in a template
         this.sendAction();
      }
   }
});

打开在app/templates/components/下创建的comp-yield.hbs文件,然后输入以下代码 -

<h2>Sending Actions to a Component</h2>
<input type = "button" value = "Click Here" {{action "compFunc"}} /><br/>
<p><b>{{title}}</b></p>
{{yield}}

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

{{comp-yield title = title action = "compFunc"}}
{{outlet}} 

输出 (Output)

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

Ember.js组件发送操作

当您单击按钮时,它将显示文本,如下面的屏幕截图所示 -

Ember.js组件发送操作