vue高级特性$attrs

前言：说到$attrs，我们先谈谈inheritAttrs,inheritAttrs是vue2.4.0新增的一个属性，官网文档说明：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs到 false，这些默认行为将会被去掉。意思是你在组件上加的属性，除了props绑定的属性会被组件的根元素继承，（这个属性不影响class和style）。这个值默认为true,即开启属性继承，当我们设置为false时，就不会被根元素继承。

了解完inheritAttrs，来说说我们今天的主角$attrs，与inheritAttrs一样，也是vue2.4.0新增属性，说明：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

使用场景如下：

//组件A
<template>
    <div>
        {{$attrs.name}}
        <span v-bind='$attrs'></span>
    </div>
</template>
<script>
export default {
    inheritAttrs: false
}
</script>

//使用
<A name="test" />

//最终渲染为
<div>
    test
    <span name="test"></span>
</div>

//如果inheritAttrs值为true时，则渲染如下
<div name="test">
    test
    <span name="test"></span>
</div>