inheritAttrs component attribute vue

vue official website for property inheritAttrs explanation: If you do not want to inherit the properties of the components of the root element, you can set options for assembly  inheritAttrs: false.

May not be well understood, we can give an example to verify.

Parent components 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 subassembly disposed inheritAttrs: true (default)

<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log('this.$attrs', this.$attrs)
  }
}
</script>

Final rendering results:

Elements

Console

 

 Child-component.vue subassembly disposed inheritAttrs: false

 

<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: fasle,
  mounted() {
    console.log('this.$attrs', this.$attrs)
  }
}
</script>

Final rendering results:

Elements

Console

 

to sum up:

As can be seen from the above examples, with the proviso: props subassembly properties of the parent component is passed over the unregistered.

1. When setting inheritAttrs: when true (default), the top-level label element subassembly (div element present example) renders the properties of the parent component is passed over the (present example aaa = "1111").

2. When setting inheritAttrs: false, the top label element subassembly (div element present example) does not render the properties of the parent component is passed over the (present example aaa = "1111").

3. Regardless of inheritAttrs true or false, sub-assemblies can get to the property transfer from the parent component by $ attrs property.