下一步

向组件添加属性

6 分钟

接下来，通过创建显示当前预订列表的组件，继续生成应用程序。你将添加一个窗体，用户可以使用它来添加预订，现在创建一个静态数组吧。

创建组件

首先创建组件。

使用 Visual Studio Code，在 src/components 中创建一个名为 BookingList.vue 的文件。
在 BookingList.vue 中键入 vue，然后从代码片段菜单选择“<vue> with default.vue”。

该代码片段将创建默认结构。

注册属性和计算出的值

我们需要一个预订信息数组，所以将属性声明为 Array 类型。你要创建组件，因此还可以利用计算属性自动计算值。你将添加一个计算属性，用于添加总价并返回可供你使用的显示值。

打开 src/components/BookingList.vue（如果它尚未打开的话）。
在 export default 的大括号 ({ }) 内，添加以下代码，以创建一个名为 bookings 的属性和 computed 属性：
```
props: {
    bookings: Array
},
computed: {
    totalDisplay() {
        let totalCost = 0;
        if (this.bookings && this.bookings.length > 0) {
            totalCost = 
                this.bookings.map(b => b.price)
                            .reduce((a, b) => a + b);
        }
        return '$ ' + totalCost.toLocaleString('en-US');
    }
}
```
请注意，totalDisplay 可以使用 this 访问 bookings 属性，也就是说我们能访问声明为组件的一部分的数据或其他属性。我们创建代码，以计算 bookings 中列出的所有价格的总价，并创建字符串显示。

为显示信息添加模板

接下来，添加模板以显示预订信息。你将使用 v-for 循环访问所有预订，并使用我们之前创建的 totalDisplay 计算属性。

打开 src/components/BookingList.vue（如果它尚未打开的话）。

在 <template> 元素内部，添加以下 HTML：

<section>
<h2>
    Here's your current bookings:
</h2>

<div class="row" v-for="(booking, index) in bookings" :key="index">
    <div>{{ booking.name }} </div>
</div>

<h3 class="row">
    Total: {{ totalDisplay }}
</h3>
</section>

我们的代码使用 v-for 循环访问所有预订，并显示 cabin。然后，我们调用 totalDisplay 来显示所有预订的总费用。

向主页添加组件

接下来，使用我们创建的组件，然后传入预订列表。

打开 src/components/Host.vue。
在 <script> 开始标记下、export default 前添加一个新行。

添加以下代码（包括注释）以导入 BookingList 组件：

import BookingList from './BookingList.vue';
// TODO: Register next component

通过在 TODO: Add components 注释下添加以下代码（包括注释）来注册组件：
```
components: {
    BookingList,
    // TODO: Add next component

},
```
重要

这两个逗号是必需的，因为我们未来会添加更多值。

使用组件

注册组件后，在页面中调用它吧。我们将使用之前创建的 bookings 数组在页面上播种预订列表。

打开 src/components/Host.vue（如果它尚未打开的话）。
在 TODO: Add booking-list 注释下，添加以下代码以使用 booking-list 组件：
```
<booking-list :bookings="bookings"></booking-list>
```

测试页面

注册并配置组件后，请测试页面！

选择“文件”>“全部保存”，以保存所有文件。
使用 http://localhost:8080 回到浏览器并刷新页面。

该页面现在显示示例预订。

祝贺你！你已创建了一个具有属性的组件。

继续