美文网首页
v-$attrs的用法详解与原理【转】

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

作者: 彩云_789d | 来源:发表于2022-03-25 10:35 被阅读0次

    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"

    如:

    相关文章

      网友评论

          本文标题:v-$attrs的用法详解与原理【转】

          本文链接:https://www.haomeiwen.com/subject/ojirjrtx.html