首先假设如今有一个组件<base-input></base-input>,创建改组件式的代码如下：

Vue.component("base-input", {
  inheritAttrs: false, //此处设置禁用继承特性
  props: ["label"],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
      >
    </label>
  `,
  mounted: function() {
    console.log(this.$attrs);
  }
});

在app.vue中调用该组件时的代码如下：

<base-input
      label="姓名"
      class="username-input"
      placeholder="Enter your username"
      data-date-picker="activated"
    ></base-input>

运行后再chrome浏览器查看html结构时的结果如下：

<label class="username-input">
      姓名
      <input placeholder="Enter your username" data-date-picker="activated">

</label>

而当我们将inheritAttrs这行代码注释的时候其html文档又会如下所示：

<label placeholder="Enter your username" data-date-picker="activated" class="username-input">
      姓名
      <input placeholder="Enter your username" data-date-picker="activated">

</label>

我们发现现在label标签和input标签上此时都继承了父组件的属性。

label标签是默认会继承来自父组件的属性，而input标签能继承则是因为我们使用了v-bind="$attrs"。

假如我们将v-bind="$attrs"去掉则会发现如今的html的结构又会变成下面这样：

<label placeholder="Enter your username" data-date-picker="activated" class="username-input">
      姓名
      <input>

</label>

本着探索的精神现在我们再把inheritAttrs这一句话加上，将v-bind="$attrs"放到label标签上，结果相信大家都能知道了，在这里就不详细说了。