Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Before You Begin
Create a Standalone Lightning App
Optional: Install the Expense Tracker App
Create an Expense Object
Step 1: Create A Static Mockup
Step 2: Create A Component for User Input
Step 3: Load the Expense Data
Step 4: Create a Nested Component
Step 5: Enable Input for New Expenses
Step 6: Make the App Interactive With Events
Summary
Create a Component for Salesforce1 and Lightning Experience
Creating Components
Using Components
Communicating with Events
Creating Apps
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Step 4: Create a Nested Component

As your component grows, you want to break it down to maintain granularity and encapsulation. This step walks you through creating a component with repeating data and whose attributes are passed to its parent component. You’ll also add a client-side controller action to load your data on component initialization.
  1. Click File | New | Lightning Component.
  2. Enter expenseList in the New Lightning Bundle window. This creates a new component, expenseList.cmp.
  3. In expenseList.cmp, enter this code.

    Use the API name of the fields to bind the field values. For example, if you’re using a namespace, you must use {!v.expense.myNamespace__Amount__c} instead of {!v.expense.Amount__c}.

    Note

    Instead of using {!expense.Amount__c}, you’re now using {!v.expense.Amount__c}. This expression accesses the expense object and the amount values on it.

    Additionally, href="{!'/' + v.expense.Id}" uses the expense ID to set the link to the detail page of each expense record.

  4. In form.cmp, update the aura:iteration tag to use the new nested component, expenseList. Locate the existing aura:iteration tag.

    Replace it with an aura:iteration tag that uses the expenseList component.

    Notice how the markup is simpler as you’re just passing each expense record to the expenseList component, which handles the display of the expense details.

  5. Save your changes and reload your browser.
You created a nested component and passed its attributes to a parent component. Next, you’ll learn how to process user input and update the expense object.

Beyond the Basics

When you create a component, you are providing the definition of that component. When you put the component in another component, you are create a reference to that component. This means that you can add multiple instances of the same component with different attributes. For more information about component attributes, see Component Composition.