淘宝双十一超级红包 》
Vue3 inheritAttrs 属性
Vue3 选项式 API在 Vue3 中，inheritAttrs 是一个组件选项，它决定了父组件传递给子组件的非 prop 属性（即没有被明确定义为 prop 的属性）是否应该继承到子组件的根元素上。
默认情况下，inheritAttrs 的值为 true，这意味着父组件传递的所有非 prop 属性会自动绑定到子组件的根元素上。如果你希望手动控制这些属性的继承行为，可以将 inheritAttrs 设置为 false。
如何理解 inheritAttrs？
想象一下，你有一个组件 MyButton，它接收一个 label 作为 prop，并且你希望父组件能够传递一些额外的属性，比如 class 或 style。默认情况下，这些额外的属性会直接绑定到 MyButton 的根元素上（通常是一个 <button> 元素）。
实例
<template>
<button :class="$attrs.class"> {{ label }} </button>
</template>
<script>
export default {
props: ['label'],
inheritAttrs: true
}
</script>
在这个例子中，如果父组件传递了一个 class 属性，它会被自动绑定到 MyButton 的 <button> 元素上。
inheritAttrs: false 的作用
如果你不希望这些非 prop 属性自动绑定到根元素上，可以将 inheritAttrs 设置为 false。这样，你可以手动决定这些属性应该如何被处理。
实例
<template>
<div>
<button> {{ label }} </button>
<span v-bind="$attrs">Additional Attributes</span>
</div>
</template>
<script>
export default {
props: ['label'],
inheritAttrs: false
}
</script>
在这个例子中，非 prop 属性不会绑定到 <button> 元素上，而是绑定到了 <span> 元素上。你可以通过 v-bind="$attrs" 将属性绑定到任何你想要的元素上。
使用场景
自定义属性绑定：当你不希望非 prop 属性自动绑定到根元素上时，可以禁用
inheritAttrs，并手动控制这些属性的绑定方式。避免属性冲突：在某些情况下，自动绑定的非 prop 属性可能会与子组件的属性冲突。禁用
inheritAttrs可以避免这种问题。高级组件开发：在开发复杂组件时，你可能需要更灵活地处理属性的传递和绑定。
inheritAttrs: false提供了这种灵活性。