当前位置: 首页 > Web前端 > vue.js

浅谈Vue2.4.0$attrs和inheritAttrs

时间:2023-04-01 00:18:15 vue.js

vm.$attrs官方APIvm.$attrs2.4.0新增,类型:{[key:string]:string},只读详情:包含非action中的parentscopeprop识别(和获取)的属性绑定(类和样式除外)。当一个组件没有声明任何props时,所有的父作用域绑定(除了class和style)都会被包含在这里,内部组件可以通过v-bind="$attrs"传入——在创建高级组件时非常有用。从官方的介绍我们可以得出$attrs应用于父子传值场景,子组件可以通过$attrs访问父组件传递的所有属性,但是需要注意的是,如果传递的属性byparentcomponentareinthechild如果组件props中有声明,则该属性不会出现在$attrs对象中。上面的例子首先可以看到父组件传递了name、age、id、class、style这五个属性给子组件,其中name属性声明在子组件props中,由于class和style属性会被$attrs排除,所以子组件中打印的$attrs最终输出{age:12,id:12345}然后,子组件把自己的$attrs对象传给孙组件,同时把s1和s2这两个属性传给孙组件。grandchild组件在其props中声明了两个属性age和s1,最后最后打印出来的{s2:"sss",id:12345}可以看出孙子组件的$attrs结合了父组件和子组件传递的属性,排除了props中声明的属性。$attrs的介绍到此结束。下面开始介绍inheritAttrs在heritAttrs官方APIinheritAttrs2.4.0新增,类型:boolean,默认值:true详情:默认情况下,父作用域中不被认为是props的属性绑定(attributebindings)会“fallback”并被用作普通HTML属性应用于子组件的根元素。当组成一个包装一个或另一个目标元素的组件时,这可能并不总是像预期的那样表现。通过将inheritAttrs设置为false,这些默认行为将被删除。这些特性可以通过(也是2.4中新增的)实例属性$attrs生效,并且可以通过v-bind显式绑定到非根元素。注意:此选项不影响类和样式绑定。使用介绍的官方解释似乎是在唬人。其实默认是把$attrs对象上没有声明在子组件props中的属性添加到子组件的根html标签中。示例