将属性传递给组件

组件不会在模板范围内直接访问属性。因此，只需在组件减速时声明该属性(例如:{{component-name title=title}})。外部模板范围内的 title 属性在组件模板内可用。

语法

{{post-action title=title}}

在上面的代码中，"post-action"组件具有"title"属性，并使用与属性名称相同的名称("title")进行初始化。

示例

下面给出的示例描述了如何将属性传递给组件。创建一个名为 post-action 的路由，并打开 router.js 文件以定义 URL 映射 −

import Ember from 'ember';
//以变量 Ember 的形式访问 Ember.js 库
import config from './config/environment';
//它以变量 config 的形式提供对应用程序配置数据的访问

//const 声明只读变量
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

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

//它指定可供应用程序其他部分使用的路由器变量
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 服务器；您将收到以下输出 −

emberjs_component.html