一、$attrs的理解
看完官网对 $attrs 的解释有点懵，但我们还是能得到这么几条信息
- $attrs可以获取组件中是属性
- $attrs获取不到style 和class属性
- 如果组件中的属性已经作为props传递了，那么也是获取不到的
接下来看代码：
这是A组件 ，A组件中引入了B(comB)组件在B组件中有class属性 style属性 还有 aoo boo coo 三个属性，其中 boo是由A组件传递过去的
<template>
<div>
<h1>A组件</h1>
<comB
:coo="coo"
:aoo="aoo"
:boo="boo"
style="color:red"
class="comB"
></comB>
</div>
</template>
<script>
import comB from './com-B'
export default {
components: {
comB
},
data(){
return{
coo:'A组件自己的属性1',
aoo:'A组件自己的属性2',
boo:'向子组件传递的属性'
}
}
}
</script>
接下来是B组件的代码
<template>
<div>
<h1>B组件</h1>
<!-- <comC v-bind="$attrs"></comC> -->
</div>
</template>
<script>
import comC from './com-C'
export default{
components:{comC},
props:['boo'],
mounted(){
console.log(this.$attrs)
}
}
</script>
我们在mounted中输出 this.$attrs，结果如下：
只有aoo和coo两个属性被输出了，style class props传递的属性都没有被输出
所以我们再回头看官网给的解释就感觉好理解多了：
但是！！！！！
官网中的最后一句话，我们还没有解释：可以通过
v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
二、如何使用$attrs进行组件通信
如果你在面试中，经常会被问道组件通信，我们一般常用的 props on ,其实$attrs也属于组件通信的一种
假设我们有三个组件 comA comB comC ,并且组件A(comA)中嵌套组件B(comB) ,组件B中又嵌套组件C(comC)，关系图如下：
那我们想把组件A中的数据传递到组件C,如何利用$attrs实现呢
话不多说！！！ 上代码
组件A
在组件A中引入了组件B,并且我们向组件B中传递了一些属性，由上面分析可以知道，只有aoo coo可以在组件B中被输出
组件B
组件B中嵌套了组件C
组件C
我们的目的是想把组件A的数据传递给组件C，我们在组件B中使用 this.attrs' 在组件C中我们就可以接收到数据了
3.$attrs 结合 inheritAttrs 在封装的组件中的应用
我们都知道vue项目是组件化开发，所以我们在做项目的时候也经常会自己封装一些组件，接下来看如下代码，我们自己封装一个input组件：
非常简单的一个组件，要特别注意的是，input元素中有父元素div
接下来我们在app.vue中引入，我们想在页面中显示两个输入框，一个输入用户名，一个输入密码 看代码：
所以我们分别传了type属性
这时候打开控制台我们发现，传递的属性并没有生效在input元素中，而是显示在了在Input的父元素
这时候我们在组件中通过设置属性 inheritAttrs:false ，这时候我们再看控制台发现从我们传递的type属性既没有在input元素上显示，也没有在input的父元素上显示
那么，如何让传递的type属性在input中显示呢？
我们只需要在input组件中 添加 v-bind="$attrs" 即可
