Vue 初心者筆記 #18 Emit – 向外傳遞資訊

本篇文章介紹父子元件之間,由內層向外傳遞資訊的方式 – Emit。

Emit 基本介紹

之前介紹的 Props 是「由外而內」傳遞資料,而且要盡量與外層資料斷開關係。

但是有些時候,我們還是需要把某些資料向外層傳遞,這個時候就會使用到 Emit

暖身一下

過去的筆記有介紹過 v-on 的使用方式,但我們都是在外層使用 v-on,沒有在內層元件使用過 v-onmethods

接下來的這個範例,我們希望除了能使用外層事件改變外層資料之外,也能透過內層的元件,改變外層的資料(cash 的金額)。

不過在開始之前,我們先來複習一下 v-on 的使用方法。
我們在 button 加入 v-on,並新增一個叫做 incrementTotalmethods 來修改資料。

imgur

接下來就要進入正題,介紹如何使用 $emit 從內層向外傳遞資訊囉!

使用 Emit 觸發實體上的事件

觸發順序:

  1. 觸發元件的 template 裡面的 click 事件 incrementCounter
  2. incrementCounter 事件使用 $emit 觸發自定義的事件 increment (觸發事件的名稱 increment 可以自訂)。
  3. 觸發自定義事件 increment 後,Vue 會執行綁定在 Root (根元件)底下的 incrementTotal 方法。

imgur

經過上述三個步驟,就能完成 $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 事件,這時候就會包含參數的部分了。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。