一、引用官方解释:

inheritAttrs:默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上
$attr:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)

二、代码释义
自定义子组件:

Vue.component('custom-input', {
    props: ['value'],
    template: `
        <input
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
        >
    `,
    mounted:function(){
        console.log(this.$attrs);
    }
})

父组件:

const app = new Vue({
    el:'#app',
    data:{
        customInputText:"customInputText",
        a:'1'
    }

});

使用一:

<custom-input
 v-bind:value="customInputText"
 v-on:input="customInputText = $event" 
 ></custom-input>

在这种情况下,子组件的console.log(this.$attrs);代码的结果是:Object {}

使用二:

<custom-input
 v-bind:value="customInputText"
 v-on:input="customInputText = $event" 
 :a="a"//增加此处代码
 ></custom-input>

在这种情况下,子组件的console.log(this.$attrs);代码的结果是:Object {a: “1”}

且子组件根元素上出现:a=”1”属性,这里写图片描述

当在子组件中加入inheritAttrs:false时a属性就不会自动加到根元素上了。

总之一句话:$attrs存储非prop特性,inheritAttrs控制vue对非prop特性默认行为

Logo

前往低代码交流专区

更多推荐