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

發表於 更新於 分類於

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

Emit 基本介紹

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

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

暖身一下

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

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

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

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 事件，這時候就會包含參數的部分了。

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

相關文章