vue学习之vm.$attrs与inheritAttrs的简单理解_vm.$attrs的含义-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38262910/article/details/86303362

本文介绍了 Vue 中 `vm.$attrs` 和 `inheritAttrs` 的概念及其用法。通过一个例子说明，当父组件向子组件传递多个属性时，未在 props 中声明的属性会默认绑定到子组件的根元素上。通过设置 `inheritAttrs: false`，可以避免这一行为，并使用 `v-bind="attrs"` 将属性传递给后代组件。总结指出，`vm.$attrs` 用于在组件层级间传递未定义为 prop 的属性，适用于多层级组件或大量属性传递的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景

在这里插入图片描述
文档的这段话什么意思？
简单理解来就是父子孙…组件传值用的
简单例子如下：
父组件

子组件

上图中，父组件有两个属性分别是title和message,需要传递给子组件，而子组件接受父组件传来的值是需要props的对吧，但是此时我props只接受了一个title,而没有接收message,这个时候会发现如下图
在这里插入图片描述
message这个属性会在子组件上div中显示，
而在子组件使用了inheritAttrs之后（注意inheritAttrs是与data同级的）如下图

这样就不会当做普通的html属性处理了。
**下面说vm. $a t t r s * * 注意上面父子组件件传值的时候子组件是没有用 p r o p s 接受 m e s s a g e 的，这时候在我又在子组件后注册了一个组件叫 S o n I n d e x ，当我想给 S o n I n d e x 传值的时候，我就可以用 v - b i n d = "$ attrs"了

 <son-index :title="title" v-bind="$attrs"></son-index>

这样sonindex组件就接受到了message这个值，有人可能会问，为什么没接收title这个值，注意文档说的：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。也就是$attrs传值时是不会传递class和style以及已经被props接收的值的（title）。
注意没传递一个父子组件都需要使用一次

v`-bind="$attrs",

也就是孙组件要是还想往后传递值，那么如下图
这样曾孙组件就可以接收到其父组件传递来的值了

在这里插入图片描述

需要注意的是，我们需要当用$attrs传递给后代组件后，后代组件都是需要写上
inheritAttrs= false，
否则会如下图所示，在div节点上显示message，当然不写也行，但是建议写。
在这里插入图片描述

结论

总而言之，每一个组件想从其父组件拿值，那么父组件都需要给子组件一个v-bind="$attrs".
并且子组件上写上inheritAttrs=false
适用场景：当传递的父子组件非常多时（父子孙曾孙…）或者需要传递的值很多时（传递的值多，那么props里写的内容会非常多且繁琐）
例如需要传递:message,title,name,age,content…非常多时，那么在子组件就要写

props: {
  message,
  title,
  name,
  age,
  content......
}

如果子组件还想传递给其子组件，那么上面的代码还需要重新写一遍。。。内容太多，可能逻辑写的不太好，但是尽可能详细了，欢迎大家一同交流