Emberjs-comp-cust-ele

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 finddevguides...
{{yield}}

_index.hbs_ファイルを開き、次のコード行を追加します-

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

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsコンポーネントカスタマイズ要素