问题背景
文档的这段话什么意思?
简单理解来就是父子孙…组件传值用的
简单例子如下:
父组件
子组件
上图中,父组件有两个属性分别是title和message,需要传递给子组件,而子组件接受父组件传来的值是需要props的对吧,但是此时我props只接受了一个title,而没有接收message,这个时候会发现如下图
message这个属性会在子组件上div中显示,
而在子组件使用了inheritAttrs之后(注意inheritAttrs是与data同级的)如下图
这样就不会当做普通的html属性处理了。
**下面说vm.
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......
}
如果子组件还想传递给其子组件,那么上面的代码还需要重新写一遍。。。内容太多,可能逻辑写的不太好,但是尽可能详细了,欢迎大家一同交流