Lightning-组件（4）属性

学习目标

完成本单元后，您将能够：

在组件上定义属性，并将属性值传递给嵌套组件。
理解组件定义和组件实例之间的区别，并创建组件的多个实例。
创建基本表达式来显示更改和计算的值。
为动态输出创建条件表达式。

组件属性

到目前为止，虽然我们已经创建了几个组件，并且在构建应用程序方面学到了一些（高层次的），但是我们编写的代码并没有做比HTML更简单的工作。也就是说，我们创建的两个组件输出相同的静态文本，不管我们做什么。你可以把他们放在同一个屏幕上，他们总是会说同样的事情。

无聊。

要改变这一点，我们需要学习两件事情。首先，我们需要学习如何使组件在创建时接受输入。也就是说，我们需要在组件上设置值。我们使用属性来做这件事。

（我们需要学习的第二件事是如何实际使用这些值来改变组件的行为和输出，在我们弄清楚属性之后，我们会这样做）。

组件上的属性就像对象中的实例变量一样。这是一种保存更改值的方法，也是一种命名这些值占位符的方法。例如，假设我们想编写一个打印自定义消息的helloMessage组件。我们可以想象为这个组件添加一个消息属性来定制它的输出。然后，我们可以在将组件添加到我们的应用程序时设置该消息，如下所示。

<aura:component>
	  
    <c:helloMessage message="You look nice today."/>
	    
</aura:component>

组件属性是可以存储值的地方。在前面的例子中，helloMessage组件有一个名为message的组件属性。大多数时候我们正在讨论组件属性。
您可以使用<aura：attribute>标签定义组件属性。我们稍后会看到一个例子。我们来调用这些属性定义。
使用它时，<aura：attribute>标签本身就具有属性！ 😖也就是说，使用<aura：attribute>标记定义组件属性时，可以在<aura：attribute>上设置属性，以指定要定义的组件属性的“形状”。 😡等等，让我们再试一次：通过设置属性定义的属性来添加一个组件属性定义。 component组件属性的属性定义是否具有属性？ 😴
这就是为什么作家😱。我们试着用一些代码来解决这个术语问题。 😄

下面是我们的helloMessage组件的开始：

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>Hello! [ message goes here, soon ]</p>

</aura:component>

👍 ?

我们在这里使用的另一个属性是type，我们已经设置了它，因为它在属性定义中是必需的。它说消息属性包含一个字符串，这是有道理的。我们将详细讨论属性数据类型和属性定义的其他部分，但是首先让我们学习表达式，然后让helloMessage实际上做一些事情。

表达式

不要再让我们迷失，而是让我们按照预期使用helloMessage。

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>Hello! {!v.message}</p>

</aura:component>

我们使用表达式{！v.message}输出消息的内容。也就是说，这个表达式引用了消息属性。表达式被评估，并解析为当前存储在消息中的文本字符串。这就是表达式输出到组件主体的内容。

嗯…这是什么“表达”？

表达式基本上是一个公式或计算，您将其放在表达式分隔符（“{！”和“}”）中。所以，表达式如下所示：

{!<expression>}

表达式的正式定义有点令人生畏，但让我们看一下，然后解压它：表达式是可以解析为单个值的任何一组字面值，变量，子表达式或运算符。

是的，基本上是一个公式，就像你在计算领域，过滤标准或Visualforce中写的一样。公式或表达式可以包含各种各样的东西。字面值应该是显而易见的;他们是像数字42，或字符串“你好”的东西。变量就像消息属性一样。运算符就像+， – 等等，子表达式基本上意味着你可以使用括号把事物分组在一起。

让我们试试这个，让我们的表情稍微复杂一些。

<aura:component>

    <aura:attribute name="message" type="String"/>

    <p>{!'Hello! ' + v.message}</p>

</aura:component>

{!$Label.c.Greeting + v.message}

<aura:component>
    <aura:attribute name="customMessage" type="String"/>
    <p> <c:helloMessage message="{!v.customMessage}"/> </p>
</aura:component>

价值提供者

实际上，我们需要谈谈表情的另一个方面。在前面的例子中，我们用v.message引用了helloMessage组件的消息属性。什么是“v”部分？

v是所谓的价值提供者。价值提供者是分组，封装和访问相关数据的一种方式。价值提供者是一个复杂的话题，所以现在把v想象成一个可供你使用的自动变量。在我们的组件中，v是视图的值提供者，它是helloMessage组件本身。

v给你一个“钩子”来访问组件的消息属性，这就是你如何访问组件的所有属性。

值提供者中的值作为命名属性被访问。要使用值，请使用点（句点）分隔值提供程序和属性名称。例如，v.message，正如我们所见。

当组件的属性是对象或其他结构化数据（即不是原始值）时，使用相同的点符号访问该属性上的值。例如，{！v.account.Id}访问帐户记录的Id字段。对于深度嵌套的对象和属性，继续添加点来遍历结构并访问嵌套的值。

属性数据类型

访问结构化数据是讨论属性的一个很好的部分，特别是关于非基本属性类型。消息是一个字符串，但是有许多不同的属性类型。

原始数据类型，如布尔值，日期，日期时间，十进制，双精度，整数，长或字符串。任何编程语言通常的使用的。
标准和自定义Salesforce对象，例如Account或MyCustomObject__c。
集合，例如List，Map和Set。
自定义Apex类。
特定于框架的类型，如Aura.Component或Aura.Component []。这些比我们在这个模块中会更先进，但是你应该知道它们存在。

这是一个精简的费用项目组件，我们将在稍后填写。它演示了如何为自定义对象定义属性，以及如何访问记录中的字段。

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>

    <p>Amount:
        <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
    </p>
    <p>
        Client: {!v.expense.Client__c}
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Reimbursed?"                           
                         name="reimbursed"                         
                         checked="{!v.expense.Reimbursed__c}" />
     </p> 
    <!-- Other markup here -->

</aura:component>

其他方面的属性定义

当涉及到您在<aura：attribute>标签上设置的属性时，以下是您需要了解的其余部分。

默认属性定义了默认的属性值。它在引用属性时使用，但尚未设置该属性的值。
必需的属性定义属性是否是必需的。默认值是false。
description属性定义了属性及其用法的简要摘要。

为具有复杂数据类型的属性设置默认值可能有些棘手。不过，我们稍后会看到一个例子，所以现在我们只是把你的头抬起来。

乐趣与属性和表达式

为了说明更多关于属性和表达式的概念，让我们用下面的标记创建一个非常愚蠢的组件helloPlayground。

<aura:component>

    <aura:attribute name="messages" type="List"
        default="['You look nice today.',
            'Great weather we\'re having.',
            'How are you?']"/>


    <h1>Hello Playground</h1>

    <p>Silly fun with attributes and expressions.</p>


    <h2>List Items</h2>

    <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <p><c:helloMessage message="{!v.messages[1]}"/></p>
    <p><c:helloMessage message="{!v.messages[2]}"/></p>


    <h2>List Iteration</h2>

    <aura:iteration items="{!v.messages}" var="msg">
        <p><c:helloMessage message="{!msg}"/></p>
    </aura:iteration>


    <h2>Conditional Expressions and Global Value Providers</h2>

    <aura:if isTrue="{!$Browser.isIPhone}">
        <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <aura:set attribute="else">
        <p><c:helloMessage message="{!v.messages[1]}"/></p>
        </aura:set>
    </aura:if>

</aura:component>