Vue.js 组件中 inheritAttrs 与 $attrs 属性继承机制详解

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