在构建可复用组件库时，如何正确处理父组件传入的属性（Attributes）是一个常见痛点。Vue 默认会将这些属性继承到组件的根元素上，但在某些场景下，我们需要更精细的控制。
以封装一个基础输入框为例，创建一个名为 base-input 的组件。默认情况下，如果模板根节点是 label，那么所有未声明为 props 的额外属性都会自动绑定到这个 label 标签上。
Vue.component("base-input", {
props: ["label"],
template: `
<label>
{{ label }}
<input />
</label>
`,
mounted: function() {
console.log(this.$attrs);
}
});
当我们在父组件中调用它并传入 class、placeholder 等属性时：
<base-input
label="姓名"
class="username-input"
placeholder="Enter your username"
></base-input>
渲染后的 DOM 结构会呈现为：
<label class="username-input">
姓名
<input placeholder="Enter your username">
</label>
可以看到，class 和 placeholder 都落在了 label 标签上，而 input 标签并没有获得这些属性。这通常不是我们想要的结果，因为样式类名应该作用于 input 本身。
禁用特性继承
为了将属性手动分发到内部元素，我们可以设置 inheritAttrs: false。这会阻止 Vue 自动将属性绑定到根节点。
Vue.component("base-input", {
inheritAttrs: false, // 禁止自动继承
props: ["label"],
template: `
<label>
{{ label }}
<input v-bind="$attrs" />
</label>
`,
mounted: function() {
console.log(this.$attrs);
}
});
此时再运行同样的调用代码，HTML 结构会发生明显变化：
<label> 姓名 </label>
<input class="username-input" placeholder="Enter your username">
注意，现在 label 不再拥有那些额外的属性，因为它们被显式地通过 v-bind="$attrs" 传递给了内部的 input 标签。这种模式在处理表单封装或需要严格隔离样式的组件时非常有用。
灵活控制属性分发
如果你希望部分属性给 label，部分给 input，或者完全自定义分发逻辑，$attrs 提供了极大的灵活性。例如，可以将 $attrs 绑定到 label 而不是 input，或者根据条件过滤某些属性。
关键在于理解：当 inheritAttrs 为 false 时，$attrs 对象包含了所有未被声明为 props 的父级属性，你需要决定将它们应用到哪里。这避免了属性意外污染根元素，让组件的内部实现更加可控。