浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

2023-07-29 15:43:03 198

vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。

vm.$attrs

官方API

vm.$attrs

2.4.0新增，类型：{[key:string]:string}，只读

详细：

包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

使用介绍

从官方介绍我们可以得出$attrs应用于父子传值场景下，子组件通过$attrs可以访问父组件传过来的所有属性，但需要注意的是如果父组件所传的属性中有在子组件props中有过声明，那么该属性不会出现在$attrs对象中。

上示例

首先可以看到父组件传给子组件传了name、age、id、class、style五个属性，其中name属性在子组件props中声明，又因为class和style属性会被$attrs除外，最终在子组件打印的$attrs输出了{age:12,id:12345}

接着，子组件把自己的$attrs对象传给了孙子组件，同时又给孙子组件传了s1、s2两个属性，孙子组件在自己的属性props中声明了age、s1两个属性，最终打印输出{s2:"sss",id:12345}可以看到，孙子组件的$attrs合并了从父组件和子组件传来的属性，并把props中声明的属性除外

至此$attrs的介绍结束，下面开始介绍inheritAttrs

inheritAttrs

官方API

inheritAttrs

2.4.0新增，类型：boolean，默认值：true

详细：

默认情况下父作用域的不被认作props的特性绑定(attributebindings)将会“回退”且作为普通的HTML特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置inheritAttrs到false，这些默认行为将会被去掉。而通过(同样是2.4新增的)实例属性$attrs可以让这些特性生效，且可以通过v-bind显性的绑定到非根元素上。

注意：这个选项不影响class和style绑定。

使用介绍

官方的解释看上去很唬人，其实默认情况就是把$attrs对象上没在子组件props中声明的属性加在子组件的根html标签上

上示例

可以看到父组件传给子组件传了name、age两个属性，其中name属性在子组件props中声明，以上代码浏览器解析后


我是父组件
我是子组件

可以看到没有在子组件props中声明的age属性被写到了标签里，如果你不希望这样，则可以把子组件中的inheritAttrs设为false，解析后的结果如下


我是父组件
我是子组件

可以看到标签中的属性消失了，同时可以看到class、style属性不受影响

至此inheritAttrs的介绍结束

到此这篇关于浅谈Vue2.4.0$attrs与inheritAttrs的具体使用的文章就介绍到这了,更多相关Vue2.4.0$attrs与inheritAttrs内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

热门推荐

随机推荐