EmberJS - 自定义组件元素

通过使用 Ember.Component 子类并为其设置 tagName 属性来自定义元素。

语法

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'tag_name'
});

范例

以下给出的范例指定了使用 tagName 属性来自定义组件的元素。创建一个名为 post-action 的组件，它将在 app/components/ 下获得定义。

打开 post-action.js 文件并添加以下代码 −

import Ember from 'ember';

export default Ember.Component.extend ({
   tagName: 'h1'
});

现在打开组件模板文件 post-action.hbs，并添加以下代码行 −

Welcome to Tutorialspoint...
{{yield}}

打开 index.hbs 文件并添加以下代码行 −

{{post-action}}
{{outlet}}

输出

运行 ember 服务器；你将收到以下输出 −