Vue 初心者筆記 #18 Emit – 向外傳遞資訊
本篇文章介紹父子元件之間,由內層向外傳遞資訊的方式 – Emit。
Emit 基本介紹
之前介紹的 Props
是「由外而內」傳遞資料,而且要盡量與外層資料斷開關係。
但是有些時候,我們還是需要把某些資料向外層傳遞,這個時候就會使用到 Emit
。
暖身一下
過去的筆記有介紹過 v-on
的使用方式,但我們都是在外層使用 v-on
,沒有在內層元件使用過 v-on
與 methods
。
接下來的這個範例,我們希望除了能使用外層事件改變外層資料之外,也能透過內層的元件,改變外層的資料(cash
的金額)。
不過在開始之前,我們先來複習一下 v-on
的使用方法。
我們在 button
加入 v-on
,並新增一個叫做 incrementTotal
的 methods
來修改資料。
接下來就要進入正題,介紹如何使用 $emit
從內層向外傳遞資訊囉!
使用 Emit 觸發實體上的事件
觸發順序:
- 觸發元件的
template
裡面的click
事件incrementCounter
。 incrementCounter
事件使用$emit
觸發自定義的事件increment
(觸發事件的名稱increment
可以自訂)。- 觸發自定義事件
increment
後,Vue 會執行綁定在 Root (根元件)底下的incrementTotal
方法。
經過上述三個步驟,就能完成 $emit
的觸發了!
現在我們每次點擊內層的「增加 1 元」按鈕,都可以幫外層 (Root) 的 cash
數值增加 1。
第一個按鈕才可以喔,另外一個按鈕沒有加上
v-on
,點擊是不會有效果的。
範例程式碼:
Emit 事件可以帶參數
我們可以 this.$emit('increment')
後面再加上參數 this.counter
,
這個 this.counter
是藉由 input
改變它的值,來讓「增加 1 元」的按鈕裡面的金額可以自訂。
這邊的
this.counter
加上Number
是要確保它的型別為數值。
傳遞的參數一樣是由外層的方法 incrementTotal
去做接收。
(例如:incrementTotal: function(newNumber){...}
)
最後,外層按鈕的 @click="incrementTotal"
事件要加上參數(例如:v-on:click="incrementTotal(1)"
)。
因為外層使用時並沒有傳入參數,所以必須將參數加在 incrementTotal
上。
而內層按鈕的 @increment="incrementTotal"
則不用再加參數。
因為使用 $emit
傳遞的時候,預設是會帶入整個 incrementTotal
事件,這時候就會包含參數的部分了。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。