在构建可复用组件库时，如何正确处理父组件传入的属性（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: ,
: [],
: ,
: () {
.(.);
}
});