vue $attrs的使用(组件父传孙的方法)
$attrs的使用 vue
$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的使用示例（父组件的列表行数据传递给孙子组件展示）
- 父组件（Father.vue），给子组件关联数据，子组件如果不用props接收，那么这些数据就作为普通的HTML特性应用在子组件的根元素上
传递
- 儿子组件（Child.vue），中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加
v-bind="$attrs"，这样孙子组件才能接收到数据
儿子组件
- 孙子组件（GrandChild.vue），在孙子组件中一定要使用props接收从父组件传递过来的数据
孙子组件
传给孙子组件的数据：{{row.name}} {{row.name !== undefined? '学习' : ''}} {{row.study}}
结果：
在上面提过，如果给子组件传递的数据，子组件不使用props接收，那么这些数据将作为子组件的特性，这些特性绑定在组件的HTML根元素上，在vue2.40版本之后，可以通过inheritAttrs = false 来控制这些特性是否显示在dom元素上 如：案例中父组件给子组件传递的row和isShow，子组件没有使用props接收，这个2个数据直接作为HTML的特殊属性。子组件使用inheritAttrs = true，那么特性显示在dom上，如果设置为false，那么特性不显示在dom上
