vue里的$attrs
$attrs官网介绍关于$attrs, vue官网如是介绍:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。$attrs大白话介绍attr...
$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
为空对象
更多推荐
所有评论(0)