將自訂事件新增至元件

7 分鐘

我們將藉由新增表單來完成應用程式。表單會有一個下拉式清單讓使用者選取其所需的艙位，並且有用來預訂巡航的按鈕。您會將其設定為新元件，並建立按鈕的事件。最後，您將從 Host.vue 呼叫這個新元件。

建立元件

首先建立元件。

在 Visual Studio Code 中，於 src/components 中建立名為 BookingForm.vue 的檔案。
在 BookingForm.vue 中鍵入 vue，然後從 [程式碼片段] 功能表中選取 [<vue> with default.vue] (使用 default.vue 的 )。

程式碼片段會建立預設結構。

新增元件的程式碼

接下來，我們將新增元件所將使用的程式碼，包括註冊屬性、發出、資料和方法。

開啟 src/components/BookingForm.vue (若尚未開啟)。
在 export default 的大括弧 ({ }) 中新增下列程式碼，以設定元件：
```
props: {
    cabins: Array,
},
emits: ['bookingCreated'],
data() {
    return {
        cabinIndex: -1
    }
},
methods: {
    bookCabin() {
        if(this.cabinIndex < 0) return;
        this.$emit('bookingCreated', this.cabinIndex);
        this.cabinIndex = -1;
    },
}
```
此程式碼首先會建立一個 cabins 屬性，以顯示可用艙位的清單。我們使用 emits 來公開一個名為 bookingCreated 的事件。我們建立一個名為 cabinIndex 的資料項目，用以儲存選取的艙位索引。

最後，我們建立名為 bookCabin 的方法。此方法會檢查 cabinIndex 的值，且只有在值為 0 或更大 (表示使用者已選取艙位) 時才會執行。如果通過此驗證，我們會發出傳回所選 cabinIndex 的事件，並將 cabinIndex 設為 -1。

新增顯示範本

新增程式碼後，我們可將注意力轉移到顯示上。我們想要有用來選取艙位的下拉式清單，以及用來預訂旅程的按鈕。此按鈕將會呼叫您先前建立的 bookCabin 函式。

開啟 src/components/BookingForm.vue (若尚未開啟)。

在 <template> 標籤內新增下列程式碼，以建立顯示：

<section>
<h2>Book now!</h2>
<form>
    <div class="row">
        <label for="cruise-cabin">Select class:</label>
        <select id="cruise-cabin" v-model="cabinIndex">
            <option disabled value="-1">Select a cabin</option>
            <option v-for="(cabin, index) in cabins" :value="index" :key="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <button class="button" type="button" @click="bookCabin">Book now!</button>
    </div>
</form>
</section>

HTML 會建立表單。我們 cabins 使用建立下拉式清單，藉以對 v-for 屬性執行迴圈。我們將標籤 select 的模型繫結至 cabinIndex，使其在使用者選取艙位並選取按鈕時傳回。接著我們設定按鈕，使其一經選取就會呼叫 bookCabin。

將 BookingForm 新增至頁面

最後，請將新建的 BookingForm 新增至 Host.vue，使其新增至應用程式。

開啟 src/components/Host.vue。
在 TODO: Register next component 註解後面新增下列程式碼，以匯入 BookingForm：
```
import BookingForm from './BookingForm.vue';
```
在 TODO: Add next component 註解後面新增下列程式碼，以將 BookingForm 新增至可用元件清單：
```
BookingForm
```
在 TODO: Add methods 註解後面新增下列程式碼，以新增處理 bookingCreated 自訂事件的方法：
```
methods: {
    addBooking(cabinIndex) {
        const cabin = this.cruise.cabins[cabinIndex];
        const booking = {
            cabin: cabin.name,
            price: cabin.price
        }
        this.bookings.push(booking);
    }
}
```
addBooking 函式會使用索引擷取選取的艙位。然後，函式會使用 cabin.name 和 cabin.price 建立新的 booking 物件。接著，我們將 booking 新增至 bookings 陣列。
在 TODO: Add booking-form 註解後面新增下列程式碼，以使用 booking-form 元件：
```
<booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>
```
我們將 addBooking 函式連線至 booking-created 事件，並傳遞艙位清單以供顯示。

顯示艙等類型

我們將修改範本，以顯示我們的訂位資訊。我們不使用上個練習中顯示的「範例」訂位訊息，改為顯示每個訂位的艙等類型。

開啟 src/components/BookingList.vue。

在 <template> 元素內，將 div 中的欄位名稱從 booking.name 變更為 booking.cabin：

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

測試頁面

所有程式碼都新增後，我們將測試頁面！

請選取 [檔案]>[全部儲存] 以儲存全部檔案。
移至 http://localhost:8080 並重新整理頁面。
從下拉式清單中選取艙位，然後選取按鈕。

您的新預約會顯示。

現在，您已建立並呼叫具有自訂事件的元件！