【升版指南】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

【升版指南】Vue 3 移除 $listeners 後如何跨元件傳遞事件

從 Vue2 到 Vue3 會有不兼容的特性，需要特別注意，其中跨元件傳遞資料和事件常用的 $attrs 、 $listeners ，就是其中的一項。

在 Vue3 移除 $listeners ，全部改到 $attrs 裡，因此在 Vue2 裡可能會有這種情況：

<template>
  <label>
    <input
        type="text"
        v-bind="$attrs"
        v-on="$listeners">
  </label>
</template>

<script>
  export default {
    inheritAttrs: false
  }
</script>

在 Vue3 ，因為 $listeners 不存在，所有的綁定只要使用 $attrs ：

<template>
  <label>
    <input
        type="text"
        v-bind="$attrs">
  </label>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

假設只需要傳遞特定的事件，而非所有的事件，舉例要傳遞的事件是 update-name ，Vue 2 的寫法利用 $listeners 會是：

<template>
   <my-element
       :name="$attrs.name"
       @update-name="$listeners['update-name']" />
</template>

在 Vue3 裡需要加上 on 作為前綴，上層元件就能夠收到事件 update-name。

<template>
   <my-element
       :name="$attrs.name"
       @update-name="$attrs['onUpdateName']" />
</template>

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