官方给出的解释如下:

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>

Logo

前往低代码交流专区

更多推荐