包装组件中的内容（Wrapping Content in a Component）

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

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

您可以使用其包装内容共享组件数据。 有关更多信息，请单击此link 。

例子 (Example)

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

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

import Ember from 'ember';
export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "xnip...");
         //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}}

输出 (Output)

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

当您单击按钮时， compFunc()函数将获得触发器，它将进一步显示以下输出 -