Vue组件间通信的10+种方法part2（$listeners详细介绍）

Vue组件间通信的10+种方法part2（$listeners详细介绍）

接着上一篇《Vue组件间通信的10+种方法part1（$attrs详细介绍）》,这篇文章是介绍$listeners的, $listeners可以说是$emit的竞品。

1 官方文档的介绍

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

2 为什么要使用$listeners？而不是$emit?

考虑以下情况

（1）子组件向父组件$emit多种方法

（2）孙组件向爷组件传递消息

这些情况和prop，$attrs面临的情景时对应的。第一种情况，需要在父组件v-on绑定多个方法；第二种情况分级地进行$emit过于繁琐。这些情景下，使用$listeners会更加方便、代码更美观。

3 怎么用$listeners?

同样采用爷组件、父组件、子组件的例子

Grand.vue, 爷爷绑定了test1和test2事件

 Child.vue 孙子$emit test3

运行代码，结果

总之，就是父组件绑定了v-on="$listeners"以后，孙子组件$emit的方法, 都会发到爷爷组件那里去。当然父组件本身的方法也会发到爷爷组件那里去，这个与$listeners无关，是$emit和$on的机制

4 疑问：如果在父组件上同时使用$listeners和v-on:test3会怎么样？

结果：都生效了