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