EmberJS - 使用组件包装内容

您可以使用模板来包装组件中的内容。假设我们有一个名为 {{my-component}} 的组件，可以通过在另一个模板中将属性传递给它来包装组件，如下所示 −

{{my-component title = title action = "funcName"}}

您可以与组件的包装内容共享组件数据。有关更多信息，请点击此 链接。

示例

下面给出的示例说明了如何在组件中包装内容。创建一个名为 post-action 的组件，它将在 app/components/ 下进行定义。

打开 post-action.js 文件并添加以下代码 −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //This method sends the specified action
         this.sendAction();
      }
   }
});

现在打开组件模板文件 post-action.hbs 并添加以下代码 −

<input type = "button" value = "Click me" {{action "compFunc"}} /><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

打开 index.hbs 文件并添加以下代码 −

<b>Click the button to check title property value</b>
{{post-action title = title action = "compFunc"}}
{{outlet}}

输出

运行 Ember 服务器；您将收到以下输出 −

当您单击按钮时，compFunc() 函数将得到触发，并且它将进一步显示以下输出 −