关键要点
本文由Edwin Reynoso和Nilson Jacques同行评审。感谢所有SitePoint的同行评审者，使SitePoint的内容达到最佳状态! 组件是Ember应用程序的重要组成部分。它们允许您定义自己的、特定于应用程序的HTML标签，并使用JavaScript实现其行为。从Ember 2.x开始，组件将取代视图和控制器（已被弃用），并且是构建Ember应用程序的推荐方法。
Ember对组件的实现尽可能地遵循W3C的Web组件规范。一旦自定义元素在浏览器中广泛可用，应该很容易将Ember组件迁移到W3C标准，并使其可被其他框架使用。
如果您想了解更多关于可路由组件为什么取代控制器和视图的信息，请查看Ember核心团队成员Yehuda Katz和Tom Dale的这段简短视频。
选项卡切换器应用程序
为了深入了解Ember组件，我们将构建一个选项卡切换器小部件。这将包含一组带有相关内容的选项卡。点击一个选项卡将显示该选项卡的内容并隐藏其他选项卡的内容。够简单吧？让我们开始吧。
与以往一样，您可以在我们的GitHub仓库或这个Ember Twiddle上找到本教程的代码，如果您想在浏览器中试验代码的话。
Ember组件的构成
Ember组件包含一个Handlebars模板文件和一个配套的Ember类。只有当我们需要与组件进行额外的交互时，才需要实现此类。组件的使用方式类似于普通的HTML标签。当我们构建选项卡切换器组件时，我们将能够像这样使用它：
<code>{{tab-switcher}}{{/tab-switcher}}</code>Ember组件的模板文件位于app/templates/components目录中。类文件位于app/components中。我们使用所有小写字母，单词之间用连字符分隔来命名Ember组件。这是按照约定来命名的，这样可以避免与未来的HTML Web组件发生名称冲突。
我们的主要Ember组件将是tab-switcher。请注意，我说的是主组件，因为我们将有多个组件。您可以将组件与其他组件结合使用。您甚至可以将组件嵌套在另一个父组件中。在我们的tab-switcher的情况下，我们将有一个或多个tab-item组件，如下所示：
<code>{{tab-switcher}}{{/tab-switcher}}</code>如您所见，组件也可以像原生HTML元素一样具有属性。
创建Ember 2.x项目
要遵循本教程，您需要创建一个Ember 2.x项目。方法如下：
Ember使用npm安装。有关npm的教程，请参见此处。
<code>{{#each tabItems as |tabItem| }}
{{tab-item item=tabItem
setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>在撰写本文时，这将引入版本1.13
<code>npm install -g ember-cli </code>
接下来，创建一个新的Ember应用程序：
<code>ember -v => version: 1.13.8 </code>
导航到该目录并编辑bower.json文件以包含最新版本的Ember、ember-data和ember-load-initializers：
<code>ember new tabswitcher</code>
回到终端运行：
<code>{
"name": "hello-world",
"dependencies": {
"ember": "^2.1.0",
"ember-data": "^2.1.0",
"ember-load-initializers": "^ember-cli/ember-load-initializers#0.1.7",
...
}
}
</code>Bower可能会提示您进行Ember的版本解析。从提供的列表中选择2.1版本，并在其前面加上感叹号以将其解析持久化到bower.json。
接下来启动Ember CLI的开发服务器：
<code>bower install </code>
最后导航到http://localhost:4200/并检查浏览器控制台的版本。
创建选项卡切换器组件
让我们使用Ember内置的生成器创建一个选项卡切换器组件：
<code>ember server</code>
这将创建三个新文件。一个是我们的HTML的Handlebars文件（app/templates/components/tab-switcher.hbs），第二个是我们的组件类的JavaScript文件（app/components/tab-switcher.js），最后一个是测试文件（tests/integration/components/tab-switcher-test.js）。测试组件不在本教程的范围内，但您可以在Ember网站上阅读更多相关信息。
现在运行ember server来加载服务器并导航到http://localhost:4200/。您应该会看到一个标题为“欢迎来到Ember”的欢迎消息。那么为什么我们的组件没有显示出来呢？好吧，我们还没有使用它，所以让我们现在就使用它。
使用组件
打开应用程序模板app/templates/application.hbs。在h2标签后添加以下内容以使用组件。
<code>ember generate component tab-switcher</code>
在Ember中，组件可以通过两种方式使用。第一种方式，称为内联形式，是在不包含任何内容的情况下使用它们。这就是我们在这里所做的。第二种方式称为块形式，允许将Handlebars模板传递给组件，并在组件模板中{{yield}}表达式出现的地方呈现该模板。在本教程中，我们将坚持使用内联形式。
但是，这仍然没有在屏幕上显示任何内容。这是因为组件本身没有任何内容要显示。我们可以通过向组件的模板文件（app/templates/components/tab-switcher.hbs）添加以下行来更改这一点：
<code>{{tab-switcher}}{{/tab-switcher}}</code>现在，当页面重新加载（应该会自动发生）时，您将看到上面显示的文本。令人兴奋的时刻！
创建选项卡项目组件
既然我们已经设置了我们的主要tab-switcher组件，让我们创建一些tab-item组件来嵌套在其中。我们可以像这样创建一个新的tab-item组件：
<code>{{#each tabItems as |tabItem| }}
{{tab-item item=tabItem
setSelectedTabItemAction="setSelectedTabItem" }}
{{/each}}</code>现在将新组件的Handlebars文件（app/templates/components/tab-item.hbs）更改为：
<code>npm install -g ember-cli </code>
接下来，让我们将三个tab-items嵌套在我们的主要tab-switcher组件中。将tab-switcher模板文件（app/templates/components/tab-switcher.hbs）更改为：
<code>ember -v => version: 1.13.8 </code>
如上所述，yield辅助函数将呈现传递到我们组件中的任何Handlebars模板。但是，这只有在我们以块形式使用tab-switcher时才有用。由于我们没有这样做，我们可以完全删除yield辅助函数。
现在，当我们查看浏览器时，我们将看到三个tab-item组件，所有组件都显示“Tab Items Title”。我们的组件现在相当静态，所以让我们添加一些动态数据。
(剩余部分与上一个输出类似，只是对段落进行了重新组织和措辞的修改，以保持内容一致性并避免重复。 为了节省空间，这里不再重复剩余部分的输出。)
以上是了解Ember 2中的组件的详细内容。更多信息请关注PHP中文网其他相关文章！
