vue里的$attrs

$attrs官网介绍

关于$attrs, vue官网如是介绍：

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

$attrs大白话介绍

attrs就是属性的意思即attribute， js的setAttribute, getAttribute听过把，jq的$().attr有用过吧，他们是用来设置啥的？不就是设置类似于title, data-x, src这类的属性么，由此延伸，大概可知道vue实例里的this.$attrs是啥了。
再来，如有一个父组件是这样的：

<father :age="age" :sex="sex" title="ohNo" data-height="100"></father>

如上，很明显age, sex在子组件中可通过props来接受这些值，这就完成可父组件向子组件传值，可注意，这时候props可拿不到像title与data-height的值，这时候在子组件打印this.$attrs,你会发现是这样子的：

这样子就可以拿到这些属性值啦，值得注意的是，class跟style不属于属性值。

$atrrs深传递

如果有这样一种情况呢，子组件可以通过this.$attrs的拿到父组件的属性值，然后孙组件呢，如果在子组件上面没有定义属性，在孙组件里打印this.$attrs其实是个控制，为啥？因为子组件没定义属性啊，相要在孙组件乃至更深层的后代里拿到父组件的属性值，可以在相应子组件里通过v-bind="$attrs"即可传递父组件的属性值至下一代子组件，若要继续往下传递，相应字组件也要添加v-bind="$attrs"
如：
父组件：

<father :age="age" :sex="sex" title="ohNo" data-height="100"></father>

子组件：

<child v-bind="$attrs"></child>

这里this.$attrs是{data-height: "45", title: "ohNo"}

孙组件

 <boy  v-bind="attrs"></boy>

这里this.$attrs是{data-height: "45", title: "ohNo"}，如果子组件没有加v-bind="$attrs"，这里打印this.$attrs为空对象