定义:

vue官网对于inheritAttrs的属性解释:默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。

如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false

这个很不好理解,这里我直接用代码说明:

父组件 parent.vue

<script>
<template>
 <div class="parent">
    <child-component aaa="1111"></child-component>
  </div>
</template>
<script>
import ChildComponent from './child'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件 child-component.vue (默认 inheritAttrs为true)

<script>
<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)
    // 当inheritAttrs为true时:输出this.$attrs, {a: "1111"}
    // 当inheritAttrs为false时:输输出this.$attrs, {a: "1111"}
    // 所以可以看出来$attrs值与inheritAttrs无关
  }
}
</script>

element渲染的结果:

  • 当inheritAttrs为true时

 

  • 当inheritAttrs为false时

Logo

前往低代码交流专区

更多推荐