前言:父子组件通讯一般都使用的是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 都是可以的。