Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

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

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

Emit 基本使用

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

前情提要

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

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

範例程式碼:CodePen Demo

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

使用 Emit 時帶入參數

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

子元件

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

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

父元件

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

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

範例程式碼:CodePen Demo

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

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

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