$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"
如:
网友评论