$listeners 被 Vue3 抛弃了，那它的活儿谁来接？

Vue3 已经不支持 $listeners 了，参考 https://v3.vuejs.org/guide/migration/listeners-removed.html

从文档中可以知道 Vue2 的 $listeners 在 Vue3 中是合并到了 $attrs 里。

下面用一段代码示例来演示将父组件（Parent.vue）的事件通过 $attrs 传给孙子（Grandchild.vue）组件使用方法：

Parent.vue

<template>
  <Child @call="handleEmit" />
</template>

import { defineComponent } from 'vue'
import Child from 'path/to/Child.vue'

export default defineComponent({
  name: 'Parent',
  components: { Child },
  setup() {
    return {
      handleEmit() {
        console.log('hahaha')
      }
    }
  }
})

Child.vue

<template>
  <!-- 注意传参方式 -->
  <Grandchild v-bind="$attrs" />
</template>

import { defineComponent } from 'vue'
import Grandchild from 'path/to/Grandchild '

export default defineComponent({
  name: 'HelloWorld',
  components: { Grandchild },
  
  setup(props, { attrs }) {
    console.log(attrs) // 可以看到 Parent 传入的 call 事件，且前面加上了 on，变成了 onCall
  }
})

Grandchild.vue

<template>
  <button @click="handleClick">Clikc</button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['call'],
  setup(props, { emit}) {
    return {
      handleClick() {
        emit('call') // 成功触发 Parent 里面的 call 事件回调，在控制台打出 hahaha
      }
    }
  }
})
</script>