Vue 父子组件传值中inheritAttrs +$attrs + $listeners用法

Vue 父子组件传值中inheritAttrs +$attrs + $listeners用法

我们在vue组件中常用的传值方式有

1. 通过 props 的方式向子组件传递(父子组件)
2. vuex 进行状态管理(父子组件和非父子组件)
3. 非父子组件的通信传递 Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。

下面介绍第四种方式

inheritAttrs

默认情况下父作用域的不被子组件用 props接收的属性都会被放到$attrs这个对象中，子孙组件可通过‘$attrs`获取没有接收的父组件绑定的属性及属性值，如果设置了inheritAttrs为false，则不能通过$attrs获取没有接收的父组件绑定的属性及属性值

简单来说，就是控制子孙组件可否通过$attrs获取上级组件传过来没有被接收的值

$attrs

存放没有被子组件通过props接收的数据对象 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件，
简单来说，就是子孙组件触发父组件事件

总结

如果父组件向子传值，子在想孙传值，子组件就要通过props接收在传给孙，组组件不用这个值就没必要接收，这是我们可以在子组件中通过$attrs过去要传给孙组件的值，通过v-bind="$attrs"把要传给孙组件的值接收并传给孙组件，节省了中间步骤。
v-on="$listeners"同理，孙组件通过v-on="$listeners"触发父组件中的事件