ember*3.5（定义一个组件）

为了定义一个组件，运行：

ember g component component-name

ember 组件用来将标记文本和样式转换为可重用内容。
组件包含两块：一个用来定义行为的Javascript组件文件，及其附随的Handlebars模板，用于定义组件UI 的标记。

组件的名字必须含有至少一个划线，所以blog-post是符合规范的名字，但post不是。这可以防止与当前或未来的HTML元素名字冲突，将Ember组件与W3C Custome Elements规范对齐，并确保ember自动检测组件。

一个简单的组件可以像这样：

// in app/templates/components/blog-post.hbs

    
{{title}}
    
{{yield}}
    
编辑标题：{{input type='text' value=title}}

基于以上代码，你现在可以使用这个组件：

// in app/templates/index.hbs
{{#each model as |post|}}
    {{#blog-post title=post.title}}
        {{post-body}}
    {{/blog-post}}
{{/each}}

它的模型填充在路由处理程序中的model钩子中：

import Route from '@ember/routing/route';

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

每个组件都由引擎盖下的元素支持。默认情况下，Ember会使用

元素包含你的组件模板。要了解如何更改Ember用于组件的元素，请参阅Customizing a Component's Element。

定义组件子类

通常，您的组件将包含重用的Handlebar模板。在这些情况下，您根本不需要编写任何JavaScript。 Handlebars允许您定义模板并将其重用为组件。

如果需要自定义组件的行为，则需要定义Component的子类。例如，如果要更改组件的元素，响应组件模板中的操作，或者使用JavaScript手动更改组件的元素，则需要自定义子类。

Ember知道基于组件文件名应该为哪个组价提供动力。例如，如果你的组件名字叫做blog-post，你会在app/components/blog-post.js路径创建一个文件。如果你的组件叫做audio-player-controls，文件名字会在路径app/components/audio-player-controls.js.创建。

动态呈现组件

{{component}}帮助程序可用于将组件的选择推迟到运行时。{{my-component}}句法始终呈现相同的组件，而使用{{component}}帮助程序允许选择要动态呈现的组件。这在你希望根据数据和外部库进行交互的情况下非常有用。使用{{component}}帮助程序将允许你保持不同的逻辑分离。

帮助程序的第一个参数是组件渲染的名字，为字符串。所以{{component 'blog-post'}}和使用{{blog-post}}是一样的。

{{component}}的实际价值来自于能够动态选择正在呈现的组件。

当传递给{{component}}的参数为null或者undefined，帮助程序什么都不显示。当参数改变时，当前呈现的组件被销毁，新的组件被创建并带入。

选择要呈现的不同组件来响应数据，允许你为不同的情况提供不同的模板和行为。{{component}}帮助程序是一种改进代码模块化的强大工具。