vue組件的inheritAttrs屬性

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屬性獲取到父組件中傳遞過來的屬性。