Vue inheritAttrs 属性的使用

官方给出的解释如下：

1、inheritAttrs 为true(默认值)，子组件的根元素会自动绑定父组件传过来的（非prop）属性，若根元素本身也声明了同样的属性，会被覆盖，如图所示

父组件调用子组件，传递属性 myattr：

<div>
   我是父组件
   <child myattr="父组件传向子组件的attr">
</div>

子组件 (child) 的根元素上自定义属性 myattr：

<template>
  <div myattr="child的myattr">
    我是子组件
  </div>
</template>

最终渲染效果，子组件的根元素 myattr属性会被覆盖

2、inheritAttrs 为false

export default {
  name: 'Child',
  props: {},
  inheritAttrs: false
}

最终渲染效果，子组件的根元素 myattr属性不会被覆盖

 
当然在子组件中可通过this.$attrs访问父组件传过来的属性，或者通过v-bind="$attrs"使用，如下图所示：

<template>
  <div myattr="child的myattr" v-bind="$attrs">
    我是子组件
  </div>
</template>