vue中$attrs的使用

• $attrs是在vue的2.40版本以上添加的。
• 项目中有多层组件传参可以使用$attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。如果使用普通的父子组件传参prop和$emit，$on会很繁琐；如果使用vuex会大材小用，只是在这几个组件中使用，没必要使用vuex；使用事件总线eventBus，使用不恰当的话，有可能会出现事件多次执行。
• 如果给组件传递的数据，组件不使用props接收，那么这些数据将作为组件的HTML元素的特性，这些特性绑定在组件的HTML根元素上
• inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, ``inheritAttrs: false`是不会影响 style 和 class 的绑定

以上解释可能有点抽象，下面用举例来详细解释：

在不使用$attrs的情况下，在父组件中使用子组件并给子组件关联数据，子组件如果不使用props接收数据，那么这些数据就会作为普通的HTML特性应用在子组件的根元素上，也就是class="content"上，但我们想要实现的是将type属性绑定给input。

// 子组件




// 父组件调用：给子组件绑定属性，设置type类型

 如果想实现将type属性绑定给input，可以再input标签中加上v-bind="$attrs"

 此时，在子组件上传递的数据成功绑定到了input上，$attrs实际上保存了所有传递给该组件的属性

在此提醒一下props和$attrs的区别：

1.props需要先声明才能获取值，而attrs则不用

2.props声明过的属性，attrs里面不会在出现

3.props不包含事件，attrs包含

4.props支持string以外的类型，而attrs只有string类型

// 子组件




// 父组件

 可以看出，$attrs中并不包含props中定义的属性。