对vue中‘禁用 Attribute 继承’和‘$attrs’小知识的理解

之前对Prop中的“禁用Attribute继承”这部分的知识一直不理解，所以自己亲自试一下小demo

 <div id="container">
            <base-input v-model="username" required placeholder="Enter your username"></base-input>
    </div>
    
    <script>
        Vue.component('base-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
        })
        var vm=new Vue({
            el:'#container',
            data() {
                return {
                    msg:'xinnianhao'
                }
            },
        })
    </script>

发现解析出来的代码如下：

<div id="container"><label>
      <input required="required" placeholder="Enter your username"></label>
</div>

如果去掉inheritAttrs: false,这个设置，结果如下：

<div id="container">
      <label required="required" placeholder="Enter your username">
      <input required="required" placeholder="Enter your username"></label>
</div>

inheritAttrs: false

说明inheritAttrs: false,这个设置决定label标签是否继承来自父组件的属性(默认继承)

vm.$attrs

• 类型：{ [key: string]: string }
  包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

内部组件获取标签中除class和style之外的标签上的属性