Vue的inheritAttrs是用來控制組件在使用非prop屬性的時候是否將這些屬性繼承到組件的根元素上。默認情況下，這些屬性不會被繼承到根元素上，但我們可以用v-bind="$attr"來手動繼承，或是使用inheritAttrs:false來強制不繼承。

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

如上面的代碼所示，我們可以使用v-bind="$attrs"來手動繼承所有非prop屬性。這樣就可以將HTML屬性傳遞給組件的根元素。默認情況下，這是被禁止的，但是我們可以通過傳遞$attrs屬性將這些屬性提供給根元素。

另外，我們也可以在組件選項中設置inheritAttrs:false來明確聲明不要繼承非prop屬性。

<template>
<div>
<span v-bind="$attrs" v-if="show">{{ message }}</span>
</div>
</template>
<script>
Vue.component('my-component', {
inheritAttrs: false,
props: {
message: String,
show: {
type: Boolean,
default: true
}
}
})
</script>

在這個例子中，我們只想要使用message和show作為prop屬性，而不是繼承所有其他的HTML屬性。通過設置inheritAttrs:false，我們可以明確的表明我們不想要繼承非prop屬性，這樣就可以更好的控制我們組件的行為。