5.3 Components — Passing Properties to A Component

1. 默认情况下，一个组件在它使用的模板范围中没有访问属性。

例如，假想你有一个blog-post组件被用来展示一个blog post：

app/templates/components/blog-post.hbs

<h1>Component: {{title}}</h1>
<p>Lorem ipsum dolor sit amet.</p>

你可以看到它有一个{{title}}Handlebars表达式去打印title属性的值到<h1>。

2. 现在设想我们有下面的模板和路由：

app/routes/index.js

export default Ember.Route.extend({
  model() {
    return {
      title: "Rails is omakase"
    };
  }
});

app/templates/index.hbs

<h1>Template: {{title}}</h1>
{{blog-post}}

运行这份代码，你会发现第一个<h1>（来自外面的模板）展现title属性，但是第二个<h1>（来自组件的）是空的。

3. 我们可以修复它通过使title属性对组件可用：

{{blog-post title=title}}

这样，通过使用相同的名字title使外面模板范围的title属性在组件模板中可用。

4. 如果，在上面例子中model的title属性被name属性替代了，我们可以改变模板的用法：

{{blog-post title=name}}

换句话说，通过使用componentProperty=outerProperty，你绑定一个来自外部范围的命名属性到内部范围的命名属性。

5. 要注意，这些属性的值是被绑定的。不管你改变这个值是在model中还是在组件内部，值保持同步。在下面的例子中，在text field中输入一些文本，无论是在外部模板还是在组件内部，主要它们是如何保持同步的。

6. 你也可以绑定来自一个{{#each}}循环中的属性。这将为每一条数据创建一个组件并且为循环中的每一个model绑定它。

{{#each model as |post|}}
  {{blog-post title=post.title}}
{{/each}}

7. 如果你使用{{component}}辅助器来渲染你的模板，你可以用相同的方式传递属性。

{{component componentName title=title name=name}}