將屬性新增至元件

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> 元素內新增下列 XAML：

<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 回到您的瀏覽器視窗，並重新整理頁面。

此頁面現在會顯示範例預約。

恭喜！您已使用屬性建立元件。