vue 子组件的子组件传值可使用inheritAttrs和attrs

父组件通过props可以向子组件传值，但在日常的开发中，还有一种情况很常见，就是父组件给子组件传值，这个值还要从子组件传给它的子组件，所以，我们可能会看到这样的代码：

//父组件
<div>
    <child :text="text"></child>
</div>
 
//子组件
<div>
    <my-child :text="text"></my-child>
</div>
 
//子组件的子组件
<div>
    <div>{{text}}</div>
</div>
复制代码

这样做是非常麻烦而且不易于维护的，通常情况下，我们可以使用vuex来解决。不过，不复杂的项目中如果仅仅为这一个问题就引入vuex实际上是没必要的，Vue提供了【inheritAttrs】和【attrs】两个功能来解决这样的问题：

//父组件
<template>
   <div>
     <child :text="text"  :count="count"></child>
   </div>
</template>
 
<script>
    export default{
        data(){
            return {
                text:"父组件的值"，
                count:123456，
            }
        }
    }
</script>

//子组件
<template>
    <div>{{text}}</div>
</template>
<script>
    export default{
        props:["text"]
    }
</script>

注意，这里父组件的count属性仅仅挂在子组件上，并没有使用。此时我们打开浏览器，可以看到子组件的dom上显示的展示了count=“123456”。
此时，我们可以通过设置inheritAttrs: false来取消这种默认行为：

data(){
  return{
    ......   
  }  
}
 
inheritAttrs: false,
mounted(){
  console.log(this.$attrs); //{count:123456}
}

这时再看dom上就没有count属性了。然后，我还打印了this.$attrs的值，值为一个包含着count键值对的Object。也就是说，父组件没有props的属性值会被保存在一个名为$attrs中供子组件使用，然而这并没有解决开头子组件的子组件获取值的问题。别急，我们只需要在子组件上加个东西就可以了：

<template>
    <div class="child">
        <my-child v-bind="$attrs"></my-child>
    </div>
</template>

这样，子组件的子组件也可以获取这个值了