Vue 3“移除listeners”是怎么回事

前言

Vue 3移除了Vue 2的listeners，官方文档写的一知半解，或许你不一定看得懂，今天我说说到底咋回事。

官方迁移文档

https://v3.cn.vuejs.org/guide/migration/listeners-removed.html#移除-listeners

Vue 2如何使用listeners

可以看我写的https://www.jianshu.com/p/a7535e9dec31

现在假定有老头组件、儿子组件、孙子组件，一共三级。

现在老头想监听孙子组件。步骤：

1. 编辑儿子vue组件，原本有，现在是：

2. 爷爷组件该怎么监听就怎么监听，孙子组件该怎么emit就怎么emit。很简单。

Vue 2向下传递attr

也是只需编辑儿子vue组件，原本有，现在是：

然后export default {}里面加上inheritAttrs: false,即可。

Vue 3怎么弄

Vue 3照搬2的写法的话会报错：

[Vue warn]: Property "$listeners" was accessed during render but is not defined on instance.

正确做法：

其实更简单，读懂官方说的现在事件监听器是 $attrs 的一部分这句话就行，官方这话意思是，老头组件里的现在被当做$attrs的一部分，由$attrs负责传递给后代组件，这时候，儿子组件像Vue 2一样加上inheritAttrs: false,，以及，孙子组件一字不用改，就可以用了。不再需要`v-on="$listeners"。

总结

忘掉v-on="$listeners"，别的跟Vue 2一毛一样。