vue学习之vm.$attrs与inheritAttrs的简单理解

版权声明：转载请注明出处： https://blog.csdn.net/qq_38262910/article/details/86303362

问题背景

文档的这段话什么意思？
简单理解来就是父子孙…组件传值用的
简单例子如下：
父组件

子组件

上图中，父组件有两个属性分别是title和message,需要传递给子组件，而子组件接受父组件传来的值是需要props的对吧，但是此时我props只接受了一个title,而没有接收message,这个时候会发现如下图

message这个属性会在子组件上div中显示，
而在子组件使用了inheritAttrs之后（注意inheritAttrs是与data同级的）如下图

这样就不会当做普通的html属性处理了。
**下面说vm. $attrs** 注意上面父子组件件传值的时候子组件是没有用props接受message的，这时候在我又在子组件后注册了一个组件叫SonIndex，当我想给SonIndex传值的时候，我就可以用v-bind="$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......
}

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