Vue $attrs 以及 inheritAttrs

学习记录

官方代码为：

<div id="app">
        <input type="text" value="hihihi">
        <base-input
            v-model="username"
            required
            placeholder='Enter your username'
        ></base-input>
    </div>

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>
       `
   })
   new Vue({
       el:'#app',
       data:{
            value:"",
            username:''
       }
   })

效果图：

理解：

当我们删除关键代码【vue组件中的：inheritAttrs:false, 和 v-bind=$attrs 】时：

效果为：

对比：删除前：添加的属性都在$attrs所在元素中。 而删除后，组件会把属性继承到最外层元素中。

结论：inheritAttrs 禁止了父级组件传递属性到下级，但通过$attrs可以将属性传到我们想要的HTML元素。当我们有多级元素或者多级组件嵌套时，我们可以方便的将属性传给我们需要的地方。就像使用最原始的HTML元素。