inheritattrs詳解

一、什麼是inheritattrs？

inheritattrs是一個在自定義組件中常用的屬性，可以讓組件內部包含的某一個子組件繼承父組件的屬性。

有些時候，我們可能想讓某一個子組件取得父組件的某些屬性，但又不想在每個子組件裡面都去寫一遍父組件的相同屬性值，這個時候就可以用到inheritattrs屬性。

inheritattrs可以讓父組件的某個屬性值傳遞給子組件，在子組件內部使用props接收使用。

二、如何使用inheritattrs？

在Vue中，可以通過 $attrs 來獲取父組件裡面傳遞過來的屬性值，這些屬性並不會被props特性所捕獲，所以需要注意判斷一下傳遞過來的屬性是否存在於子組件中。

Vue.component('child', {
  template: '<div><slot></slot></div>',
  inheritAttrs: false, // 關閉默認的繼承attrs行為
  mounted () {
    console.log(this.$attrs) // { class: 'myClass' }
  }
})

Vue.component('parent', {
  template: '<child class="myClass"></child>'
})

可以看到，在子組件中列印 this.$attrs 就能獲取到父組件傳遞過來的屬性值，而在父組件template中直接使用屬性 class=”myClass” 即可。

三、如何自定義傳遞過來的屬性名稱？

除了使用默認的屬性名稱，還可以自定義傳遞過來的屬性名稱。

Vue.component('child', {
  props: ['myColor']
  template: '<div :style="{ color: myColor }"><slot></slot></div>',
  inheritAttrs: false,
  mounted () {
    console.log(this.$attrs) // { color: 'red' }
  }
})

Vue.component('parent', {
  template: '<child v-bind:my-color="attrs.color" color="red"></child>'
})

可以看到，在父組件template中傳遞了一個color屬性值，使用了 v-bind:my-color=”attrs.color” 將 attrs 中的 color 傳遞給了 my-color。

四、繼承指令

除了傳遞屬性值，還可以繼承某些指令，比如 v-bind、v-on等等。

使用inheritAttrs: false關閉默認繼承attrs，然後自定義屬性繼承v-bind指令。

Vue.directive('highlight', {
    bind(el, binding, vnode) {
        el.style.backgroundColor = binding.value;
    }
});

Vue.component('child', {
    template: '<div v-bind="$attrs"><slot></slot></div>',
    inheritAttrs: false
});

Vue.component('parent', {
    template: '<child v-bind:highlight="\'yellow\'" v-bind:class="\'myClass\'"></child>'
});

這個時候，子組件的 class 和 highlight 指令就能繼承到父組件。

五、總結

inheritattrs能讓父組件的某個屬性傳遞給子組件，在子組件內部使用props接收使用。在Vue中，可以通過 $attrs 來獲取父組件裡面傳遞過來的屬性值，這些屬性並不會被props特性所捕獲。我們也可以自定義傳遞過來的屬性名稱，也可以繼承某些指令。