Vue.js 使用 Emit 由內向外傳遞資訊

上一篇的 Props 是由外而內傳遞資料，而且要盡量與外層資料斷開關係，而 Emit 則是把資料由內向外傳遞。

Emit 基本使用

前情提要：首先我們有一個 button，上面使用 v-on 綁定 incrementTotal 這個 methods 用來修改資料。

如果想要透過點擊子元件裡面的按鈕來幫外層的資料 +1 的話，該怎麼做呢？
我們可以藉由 Emit 來觸發事件，觸發順序如下：

1. 在子元件觸發 Click 事件 incrementCounter
2. incrementCounter 會透過 $emit 觸發自定義名稱的事件 increment
3. 觸發 increment 事件後，Vue 會執行綁定在父層的 incrementTotal 方法。

範例程式碼：CodePen Demo

經過上述三個步驟，我們完成了 Emit 的觸發，現在我們每次點擊內層的「增加 1 元」按鈕，都可以幫外層的 cash 數值增加 1。

使用 Emit 時帶入參數

上方範例中，如果想要動態修改一次增加多少金額，可以透過參數來完成。

子元件

首先我們使用 Input 改變 counter 這個變數的值，並且在 Click 事件裡的 this.$emit('increment') 後面加上參數 this.counter，這樣就能自訂「增加 1 元」按鈕裡面的金額了。

methods: {
  incrementCounter(){
    // 這裡有加上 Number() 確保型別為數值
    this.$emit('increment', Number(this.counter));
  }
}

父元件

點擊子元件的按鈕會觸發 incrementCounter，並執行 Emit 事件 increment，接著會觸發父元件與 increment 綁定的事件 incrementTotal，並取得參數 counter 的值，一次增加 counter 的金額。

methods: {
  // 傳遞的參數一樣是由外層的方法去做接收
  incrementTotal: function(newNumber){
    this.cash = this.cash + newNumber;
  }
}

範例程式碼：CodePen Demo

總結下來，在外層的 incrementTotal 事件總共有兩種用法：

1. 透過子元件的 Emit 事件 (increment) 觸發父元件的事件 (incrementTotal)，取得參數 counter 的值，一次增加 counter 的金額
2. 直接點擊父元件上的按鈕 +1，而 @click="incrementTotal(1)" 傳入的 1 就是事件參數 newNumber 的值

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