Vue组件间通信的10+种方法part1（$attrs详细介绍）

• prop
• v-model
• $children
• $parent
• $root
• $refs
• $emit
• .snyc
• $attrs
• $listeners
• provide
• inject
• eventBus
• vux
• ...

因为其他几种比较简单，看文档就可以了。我光看文档没看懂标红的几个，所以重点写一下$attrs, $listeners, provided, inject的用法

1 $attrs

文档：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

1.1 为什么要用$attrs，而不是prop？

父子组件通信使用prop非常方便，但是以下两种情况：

（1）父组件需要传递多个prop给子组件

（2）爷孙组件通信

第一种情况，子组件prop里面写多个prop:['prop1', 'prop2', 'prop3'], 有点麻烦。

第二种情况，可以使用prop间接传值的方法，但是比较繁琐，不够美。

这个时候就可以使用$attrs属性

1.2 怎么用？一个例子

eg：有三个组件，Grand，Parent，Child嵌套

爷爷爱好喝茶，财产是一箱子茶叶，头衔是茶叶爱好者，他把这些作为属性传给儿子

<template>
  <div>
    <parent :hobby="hobby" :fortune="fortune" :title="title" ></parent>
  </div>
</template>

<script>
import Parent from '@/pages/attrs/Parent.vue'
export default {
  data () {
    return {
      name: 'Grand Wall',
      hobby: 'Drinking Tea',
      fortune: 'A Box of Tea',
      title: 'tea lover;
    }
  },
  components: {
    Parent
  }
}

爸爸的头衔是茶叶爱好者的儿子 ，把这个头衔和爷爷的属性都传给孙子

<template>
  <div>
    <child v-bind="$attrs" :title="title"></child>
    <p>parent see:{{$attrs}}</p>
  </div>
</template>

<script>
import Child from '@/pages/attrs/Child.vue'
export default {
  inheritAttrs: true,
  data () {
    return {
      name: 'Parent Heart',
      title: 'Son of Tea lover'
    }
  },
  components: {
    Child
  }
}
</script>

孙子没有什么特别的属性

<template>
  <div>
    <p>child see：{{$attrs}}</p>
  </div>
</template>

<script>
export default {
  inheritAttrs: true,
  data () {
    return {
      name: 'Child Hood'
    }
  }
}

运行代码，结果： 

 简而言之：访问$attrs可以得到父组件传给子组件所有属性，如果孙组件想要访问这些数据，需要在中间的组件设置孙组件v-bind="$attrs"，而且同名的属性会被覆盖。

1.3 注意点

（1） inheritAttrs设置为true，表示子组件会继承父组件的属性，一般是设置为false的

（2）文档中的不作为 prop 被识别 (且获取)怎么理解？其实如果一个组件设置了$attrs,同时又设置prop，会报错

 我对$attrs的理解就是这样，欢迎大家补充和指正。由于篇幅太长，剩下的会开新的博文介绍