父子组件通讯-$attrs

前言：父子组件通讯一般都使用的是props,但是随着组件嵌套的复杂，props使用起来也许过于繁琐，下面介绍下$attrs 的使用方法。

关于$attrs的介绍

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

具体用法

比如：三个组件A、B、C，组件关系是：A–>B->C，想在C组件获取A组件传递的参数isReadOnly。

首先，在A组件中，在B组件上加入一个属性isReadOnly

component-A.vue

      <component-B :isReadOnly="true"/>

其次，在B组件中,在C组件上添加v-bind="$attrs"

component-B.vue

<component-C
      v-bind="$attrs"
      v-on="$listeners"/>

最后，在C组件中使用this.$attrs.isReadOnly获取传入的参数

component-C.vue：

console.log(this.$attrs.isReadOnly) // true

$attrs 可以很方便的做到属性透传，使用起来也比较简单，避免了多写 props
的痛苦。面试的时候也经常会问到父子组件通讯的方式有哪些，那么 props 和 $attrs 都是可以的。