inheritAttrs和$attrs的使用

禁用继承属性inheritAttrs和$attrs的使用

Index.html:

<div id="app">
        <test-input
         v-bind:class="class1"
         v-bind:style="{fontSize:17+'px'}"
         v-bind:test1='test1'
         test2="test2"
         placeholder="placeholder test3"
        ></test-input>
    </div>

Index.js:

Vue.component('test-input', {
  inheritAttrs: false,
  template: `<label >
                 <p v-bind="$attrs">测试</p>
                  <input  v-bind="$attrs">
             </label>`
})
new Vue({
  el:'#app',
  data:{
    class1:'class1note',
    test1:'test1note',
    test2:'test2note',
},
})

页面结果：

当将属性修改为：inheritAttrs: true,的时候
页面的结果：

包含了所有的属性：

最后总结：
当inheritAttrs的属性值为true（不写该行属性的结果同true，也就是inheritAttrs默认为true），组件的根元素会自动继承所有的属性！当为false的时候，根元素只会继承注册的属性，自建的属性不会继承！！
$attrs:它包含了父组件所有的自建属性！可以通过v-kind=“$attrs:它包含了父组件所有的自建属性！可以通过v−kind=“attrs”将所有自建属性赋给想要的元素上！！