#1 定义组件

英文原版：https://guides.emberjs.com/v2.13.0/components/defining-a-component/

定义组件，使用以下命令：

ember generate component my-component-name

组件在命名时，必须至少带一个”-“号。所以blog-post是一个合法的命名，audio-player-controls也是，但是post是不合法的。这会有效的避免与HTML元素的名称冲突。

一个简单的组件模板：

app/templates/components/blog-post.hbs

<article class="blog-post">
<h1>{{title}}</h1>
<p>{{yield}}</p>
<p>Edit title: {{input type="text" value=title}}</p>
</article>

上面已经创建了一个组件，那么现在来使用它：

app/templates/index.hbs

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

它使用路由中的model( )钩子返回的model：

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
model() {
return this.get('store').findAll('post');
}
});

每个组件，在内部都是通过一个元素来实现的。默认的，Ember使用<div>元素来包裹你的组件模板。想要了解如何修改包裹元素，请查阅Customizing a Component’s Element。

定义组件的子类

通常，组件里封装的是可以重复使用的Handlerbars模板。在这种情况下，你不需要再去写任何的javascript代码。

如果你想自定义组件，那么你需要定义继承Ember.Component类。

Ember会基于文件名来执行组件。比如，如果你有个组件名叫blog-post，那么这个组件对应的js文件的地址为：app/components/blog-post.js

动态渲染组件

{{components}}助手可以帮你动态的去渲染一个组件。{{my-component}}总是固定的渲染my-component组件，但是如果你使用{{component}}助手，那么它可以帮助你自由的选择你要渲染的组件。如果你想基于数据与不同的第三方库交互，那么这个特性非常有用。使用{{component}}助手也可以帮你把不同的逻辑很好的分离。

{{component}}助手的第一个参数就是你要渲染的组件名，{{component ‘blog-post’}}等价于{{blog-post}}。

{{component}}真正的价值在于，可以动态的根据名称来渲染指定的组件。下面的例子通过使用{{component}}助手实现通过不同的post来显示不同的组件。

app/templates/components/foo-component.hbs

<h3>Hello from foo!</h3>
<p>{{post.body}}</p>

app/templates/components/bar-component.hbs

<h3>Hello from bar!</h3>
<div>{{post.author}}</div>

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
model() {
return this.get('store').findAll('post');
}
});

app/templates/index.hbs

{{#each model as |post|}}
{{!-- either foo-component or bar-component --}}
{{component post.componentName post=post}}
{{/each}}

当传入{{component}}助手的参数是null或undefined时，助手什么也不会渲染。当参数变化时，当前的组件会被销毁，新的组件会被创建并展示。

动态的根据返回数据渲染不同的组件可以使你有能力展示不同的模板并保有不同的逻辑。{{component}}助手是帮你构建模块化代码的有力工具。

本节完