将属性传递给组件

组件不会直接访问模板作用域中的属性。因此，只在组件声明时声明该属性（例如：{{component-name title=title}}）。外部模板作用域中的 title 属性在组件的模板内可用。

语法

{{post-action title=title}}

在上面的代码中，post-action 组件有 title 属性，并使用与属性名（title）相同的名称初始化。

示例

以下示例演示如何将属性传递给组件。使用 post-action 名称创建一个路由，然后打开 router.js 文件以定义 URL 映射 −

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('post-action');
});

//It specifies Router variable available to other parts of the app
export default Router;  

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

<p>Enter your data: {{input type = "text" value = title}}</p>
<p>The details of the object passed are : {{title}}</p>
{{yield}}

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

{{post-action title=title}}
{{outlet}}

在 app/routes/ 下创建 post-action.js 文件，并使用以下代码 −

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function() {
      //assigning the default value for 'title' property
      return {
         title: ""
      };
   }
});

输出

运行 ember 服务器；你将收到以下输出 −