【升版指南】Vue 3 宣告事件 emits

Vue 3 新增 emits ，可以宣告需要傳遞到上層的事件名稱，而在 Vue2 時不需要宣告：

<template>
  <div>
    <p v-text="message" />
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

在 Vue3 要在 emits 加上 accepted，寫法與 props 宣告的方式相似 ：

<template>
  <div>
    <p v-text="message" />
    <button v-on:click="$emit('accepted')">
        OK
    </button>
  </div>
</template>

<script>
  export default {
    props: ['message'],
    emits: ['accepted'],
  }
</script>

雖然這個變動不大，但如果元件內忘記宣告，上層會收到兩次的事件觸發，造成非預期性的事件產生。

如同 props ，事件傳遞的資料可以加上驗證 (validator)。假設有個輸入訊息的 message 會透過 Button 點擊送出，期望送出的文字至少要10個字：

<template>
  <div>
    <input v-model="message">
    <button v-on:click="$emit('confirm', message)">
        OK
    </button>
  </div>
</template>

<script>
  export default {
    emits: {
    	confirm: message => message.length > 10,
    },
    data() {
        return {
            message: undefined,
        };
    },
  }
</script>

參考資料：https://v3.vuejs.org/guide/migration/emits-option.html