Lightning コンポーネント開発者ガイド
jステップ 4: ネストされたコンポーネントを作成する
コンポーネントの拡大に伴い、粒度とカプセル化を保持するために分割する場合があります。このステップでは、繰り返しのデータを含みその属性が親コンポーネントに渡されるコンポーネントの作成について説明します。また、コンポーネントの初期化時にデータを読み込むため、クライアント側のコントローラアクションも追加します。
- をクリックします。
- [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウで、「expenseList」と入力します。これにより、expenseList.cmp という新しいコンポーネントが作成されます。
-
expenseList.cmp で、次のコードを入力します。
ここでは、{!expense.Amount__c} ではなく、{!v.expense.Amount__c} を使用しています。この式は、expense オブジェクトおよびその amount 値にアクセスします。
また、href="{!'/' + v.expense.Id}" は、経費 ID を使用して、各経費レコードの詳細ページへのリンクを設定します。
-
form.cmp で、ネストされた新しいコンポーネント expenseList を使用するように aura:iteration タグを更新します。既存の aura:iteration タグを見つけます。
そのタグを、expenseList コンポーネントを使用する aura:iteration タグに置き換えます。
経費の詳細の表示を処理する expenseList コンポーネントに各 expense レコードを単に渡す場合と、マークアップが似ていることがわかります。
- 変更を保存し、ブラウザを再読み込みします。
ネストされたコンポーネントを作成したので、その属性を親コンポーネントに渡します。次に、ユーザ入力の処理方法と、経費オブジェクトの更新方法ついて説明します。
中級編
コンポーネントを作成すると、そのコンポーネントの定義を提供することになります。コンポーネントを別のコンポーネントに挿入する場合は、そのコンポーネントへの参照を作成します。つまり、同じコンポーネントの異なる属性を持つ複数のインスタンスを追加できるということです。コンポーネントの属性についての詳細は、「コンポーネントのコンポジション」を参照���てください。