多级组件嵌套传递数据，$attrs和inheritAttrs用法

我们在vue的父子组件传值的时候，我们先在需要的子组件上用props注册一些属性，然后父组件调用的时候当属性来传值。
如果我们给child传props没有注册的属性，我们就要用$attrs来取了。

现有父组件A和子组件B:
组件A的内容如下：

<template>
    <div>我是父组件
        <B :w1="hello" :w2="world" :w3="lisa"></B>
    </div>
</template>
<script>
import B from './myB'
export default {
    components:{B},
    data(){
        return{
            hello:'hello',
            world:"world",
            lisa:"myname"
        }
    }
}
</script>

组件B的内容如下：

<template>
    <div>
        我是子组件{{w1}}
    </div>
</template>
<script>
export default {
    props:["w1"],
    inheritAttrs:false,
    data(){
        return{

        }
    },
    mounted(){
        console.log(this.$attrs)
    }
}
</script>

组件B只导出了w1，在组件A中调用时，多了几个属性w2,w3，在组件B中可以使用console.log(this.$attrs)查看非prop属性，结果为一个对象{w2: “world”, w3: “myname”}
但是在控制台看到B组件的根元素div上出现了这两个属性，显示结果为：
<div w2=“world” w3=“myname”>
如果想要去除这两个属性，可以在子组件中添加inheritAttrs:false
格式如下：

export default {
    props:["w1"],
    inheritAttrs:false,
    data(){
			return{}
		}
    }

inheritAttrs

inheritAttrs:false，如果你不希望组件的根元素继承特性，你可以在组件的选项中设置，这尤其适合配合实例的 $ attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值。
1.inheritAttrs默认为true，即允许继承的意思，如果设为false，即禁止继承。
2.$attrs为组件标签内没有在组件内用props声明的属性（除了style和class）

小结：
$ attrs
$ attrs存储非prop特性，$attrs继承所有的父组件属性，但是除了prop传递的属性，style和class
inheritAttrs
inheritAttrs控制vue对非prop特性的默认行为。默认为true，继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继续特性设置inheritAttrs:false，但是class属性会继承。

多级组件传递数据

现有A,B,C三个组件依次嵌套，示例：

A到B可以通过props的方式向子组件传递值，如果A组件与C组件之间通过怎么办呢？
A和C之间属于跨多级的组件嵌套关系，要解决这一问题可以使用 $ attrs解决。

在组件C中,代码如下：

<template>
<!-- 有两个值，c1是去A组件中获取值，bb是去B组件中获取值 -->
  <div>我是组件C,我要说"{{c1}}",我给B发消息{{bb}}</div>
</template>
<script>
export default {
  // 通过props到处变量bb,c1
  props: ["bb", "c1"],
  data() {
    return {};
  }
};
</script>

在组件B中代码如下：

<template>
  <div>
    我是B组件,我要说“{{b1}}”
    <!-- 给组件C的bb赋值 -->
    <C :bb="bb"></C>
  </div>
</template>
<script>
// 导入组件C
import C from "./C";
export default {
  inheritAttrs: false,//禁止继承父组件的非prop属性
  props: ["b1"],//导出变量b1
  components: { C },//注册组件C
  data() {
    return {
      bb: "你好"
    };
  }
};
</script>

在组件A代码中：

<template>
  <div>
    我是组件A的内容
    <!-- 调用组件B 使用$attrs绑定非prop属性，并给属性赋值-->
    <B :c1="c1" :b1="b1" v-bind="$attrs"></B>
  </div>
</template>
<script>
import B from "./B";//导入组件B
export default {
  components: { B },//注册组件B
  data() {
    return {
      c1: "我是c",
      b1: "我是b"
    };
  }
};
</script>