vue 组件传值之 $attrs、$listeners

• vue的通信方法常用的有，父传子 props， 子传父 通过绑定@事件，子组件$emit 传值，也可以父组件给子组件props传递一个函数，子组件调用函数，利用参数传值。
• 其他的还有vuex集中状态管理，eventBus也就是事件的全局$emit, $on 来抛发事件传值
• 以及接下来的$attrs、$listeners 。其实这两个属性的模式，也就是父组件A把很多数据传给子组件B，子组件B利用$attrs 收集起来，然后可以利用v-bind="$attrs"在传给B的子组件C（也就是A组件的孙组件），这样就不用一个一个属性去传了。至于$listeners 与$attrs类似，$listeners 传递的是事件，在子组件以及孙组件通过$emit触发事件。

$attrs

官方解释：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

简言之：

接收除了props声明外的所有绑定属性（class、style除外）

//parent组件



//Son组件



//GrandSon组件

$listeners

官方解释：

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

简言之：

接收除了带有.native事件修饰符的所有事件监听器

//parent组件



//Son组件



//GrandSon组件