vm.$attrs
官方API
vm.$attrs
2.4.0 新增，类型：{ [key: string]: string }，只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
使用介绍
从官方介绍我们可以得出 $attrs 应用于父子传值场景下，子组件通过 $attrs 可以访问父组件传过来的所有属性，但需要注意的是如果父组件所传的属性中有在子组件 props 中有过声明，那么该属性不会出现在 $attrs 对象中。
上示例
<template>
<div>
<p>我是父组件</p>
<test name="tom" :age="12" :id="12345" class="child" style="color: red" />
</div>
</template>
<script>
export default {
components: {
test: {
template: `
<div>
<p>我是子组件</p>
<test2 v-bind="$attrs" s1="sss" s2="sss" />
</div>`,
props: ["name"],
created() {
console.log(this.$attrs); // {age: 12, id: 12345}
},
components: {
test2: {
template: `<p>我是孙子组件</p>`,
props: ["age", "s1"],
created() {
console.log(this.$attrs); // {s2: "sss", id: 12345}
}
}
}
}
}
};
</script>
首先可以看到父组件传给子组件传了 name、age、id、class、style 五个属性，其中 name 属性在子组件 props 中声明，又因为 class 和 style 属性会被 $attrs 除外，最终在子组件打印的 $attrs 输出了 {age: 12, id: 12345}
接着，子组件把自己的 $attrs 对象传给了孙子组件，同时又给孙子组件传了 s1、s2 两个属性，孙子组件在自己的属性 props 中声明了 age 、s1 两个属性，最终打印输出 {s2: "sss", id: 12345} 可以看到，孙子组件的 $attrs 合并了从父组件和子组件传来的属性，并把 props 中声明的属性除外
至此 $attrs 的介绍结束，下面开始介绍 inheritAttrs
inheritAttrs
官方API
inheritAttrs
2.4.0 新增，类型：boolean，默认值：true
详细：
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定。
使用介绍
官方的解释看上去很唬人，其实默认情况就是把 $attrs 对象上没在子组件 props 中声明的属性加在子组件的根 html 标签上
上示例
<template>
<div>
<p>我是父组件</p>
<test name="tom" age="12" class="child" style="color: red" />
</div>
</template>
<script>
export default {
components: {
test: {
template: `<p>我是子组件</p>`,
props: ["name"],
inheritAttrs: true, // 默认为 true
created() {
console.log(this.$attrs); // {age: "12"}
}
}
}
};
</script>
可以看到父组件传给子组件传了 name、age 两个属性，其中 name 属性在子组件 props 中声明，以上代码浏览器解析后
<div>
<p data-v-469af010>我是父组件</p>
<p data-v-469af010 age="12" class="child" style="color: red;">我是子组件</p>
</div>
可以看到没有在子组件 props 中声明的 age 属性被写到了标签里，如果你不希望这样，则可以把子组件中的 inheritAttrs 设为 false，解析后的结果如下
<div>
<p data-v-469af010>我是父组件</p>
<p data-v-469af010 class="child" style="color: red;">我是子组件</p>
</div>
可以看到标签中的属性消失了，同时可以看到 class、style 属性不受影响
至此 inheritAttrs 的介绍结束
