v-$attrs的用法详解与原理【转】

v-$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是啥了。

再来，如有一个父组件是这样的：

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

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

$atrrs深传递

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

如：