以下是一个简单的示例，演示了 inheritAttrs 的使用：
<template>
<custom-component custom-prop="Custom Prop" other-prop="Other Prop"></custom-component>
</template>
<script>
import { defineComponent } from 'vue';
const CustomComponent = defineComponent({
inheritAttrs: false, // 设置为 false，禁止继承根元素上的特性
props: {
customProp: String
},
template: `
<div>
<!-- 使用 v-bind="$attrs" 将未匹配的特性绑定到根元素 -->
<div v-bind="$attrs">
Custom Prop: {{ customProp }}
</div>
</div>
`
});
export default {
components: {
CustomComponent
}
};
</script>
在上述示例中，inheritAttrs: false 设置了不继承根元素上的特性。使用 v-bind="$attrs" 将未匹配的特性绑定到根元素。这样，只有 custom-prop 特性会被传递到 div 元素上，而 other-prop 不会。
在 Vue 3.0 中，默认情况下，inheritAttrs 是 true，表示组件会自动将未明确绑定的特性传递给根元素。如果你希望手动控制传递的特性，可以将 inheritAttrs 设置为 false，然后通过 v-bind="$attrs" 手动绑定。
这种方式可以使组件更加灵活地处理特性，尤其在需要对未知特性进行处理或需要显式控制特性传递时非常有用。
转载请注明出处：http://www.zyzy.cn/article/detail/541/Vue 3.0