摘要：
vue官网解释了inheritAttrs的属性：如果您不希望组件的根元素继承特性，可以在组件选项中设置inheritAtrs:false。这可能不是很好理解。我们可以举一个例子来验证它。父组件Vue＜template＞＜divclass＝“Parent”＞＜child componentaaa＝“1111”＞＜/child component＞＜/div＞＜/template＞＜script＞importChildComponent from‘/child-component的exportdefault｛components:｛ChildComponent｝｝子组件Vue sets inheritAttrs:true（默认值）子组件exportdefault｛˃子组件exportdefault｛inheritAttrs:false，mounted（）｛console.log｝｝最终呈现结果：ElementsConsole摘要：从上面的示例中，我们可以看到，前提是父组件传递的属性没有在子组件的prop中注册。
vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。
可能不是很好理解，我们可以举个例子来验证一下。
父组件 parent-component.vue
<template>
<div class="parent">
<child-component aaa="1111"></child-component>
</div>
</template>
<script>
import ChildComponent from './child-component'
export default {
components: {
ChildComponent
}
}
</script>
子组件 child-component.vue 设置 inheritAttrs: true（默认）
<template> <div class="child">子组件</div> </template> <script> export default { inheritAttrs: true, mounted() { console.log('this.$attrs', this.$attrs) } } </script>
最后渲染的结果：
Elements
Console
子组件 child-component.vue 设置 inheritAttrs: false
<template> <div class="child">子组件</div> </template> <script> export default {
inheritAttrs: fasle, mounted() { console.log('this.$attrs', this.$attrs) } } </script>
最后渲染的结果：
Elements
Console
总结：
由上述例子可以看出，前提：子组件的props中未注册父组件传递过来的属性。
1.当设置inheritAttrs: true（默认）时，子组件的顶层标签元素中（本例子的div元素）会渲染出父组件传递过来的属性(本例子的aaa="1111")。
2.当设置inheritAttrs: false时，子组件的顶层标签元素中（本例子的div元素）不会渲染出父组件传递过来的属性(本例子的aaa="1111")。
3.不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性。