讓 emit 回傳資料給 Vue 父層元件！

上一次介紹了 初步認識 Vue Props，父元件傳入值給子元件！，但是然後呢？如果我需要回傳值到父層元件，該怎麼做呢？今天就來介紹 emit 這個機制，能夠達到這樣的需求。

做個加法計算機：子元件

假設有個子元件是這樣：

const addNum = {
  template: `<button type="button" @click="returnData">點我 + 1</button>`,
  props: ['number'],
  methods: {
    returnData() {
      this.$emit('return-text', this.number + 1);
    }
  },
};

這邊建立了一個名為 addNum 的子元件，有一個名為 number 的 Props 傳入，當有人點擊「點我 + 1」按鈕時，會觸發 returnData()。在這個 function 我們發現了一個新的 this.$emit()，便是我們今天的重點。

this.$emit() 用法

this.$emit('emit 名稱', '要傳回的值');

在這段函式的兩個參數中，第一個參數是 emit 名稱，到時父元件會使用此名稱觸發 emit。

第二個參數則是要回傳的值，可以是字串、數字、物件、…各式各樣資訊，或是如範例所看到的，直接在函式內進行運算，將答案傳回。另外不一定要傳回值，可以用於單純讓父元件觸發指定 function。

父元件

HTML

<div id="app">
  <p>答案：{{ answer }}</p>
  <input type="number" v-model="number">
  <add-num :number="number" @return-text="getReturnData"/>
</div>

JavaScript

const app = Vue.createApp({
  components: {
    addNum
  },
  data() {
    return {
      number: 0,
      answer: 0,
    }
  },
  methods: {
    getReturnData(ans) {
      this.answer = ans;
    }
  }
});

app.mount('#app');

從範例可以看到有一個 input 輸入框，並與 number 做了雙向綁定，並透過 Props 將 number 傳入給 add-num 子元件，最後會將答案顯示在 answer。

但這邊出現了一個 @return-text="getReturnData"，這段話的意思就是剛剛建立的 return-text 這個 Emit 被觸發了，觸發後要執行右邊指定的函式 getReturnData()。

接下來從 JavaScript 範例可知，getReturnData() 函式帶了一個參數，就是剛剛 Emit 所傳回的參數，這時我們在將傳回值賦予值到 this.answer，父元件就會顯示 答案：傳回值 了。

此外，如果 Emit 沒有傳回值，仍然能夠透過 Emit 觸發後執行函式，這在上一段有介紹過，相信跑過這段流程後更加理解。

後記

這邊提供一個 codepen 範例「Vue Props + Emit 計算機」讓大家玩玩看，理解後在自己練習一次，會更加熟悉其用法。

參考資料

• Day16 Vue Component(元件) props、emit介紹 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天