$attrs和$listeners的使用

vue中使v-bind="attrs"，将父组件中不被认为props特性绑定的属性（即在父组件中或者说时中间组件中没有在props定义的属性值），传到孙组件中。
例如下面的层级关系

// father为第一层组件，son为第二层中间组件，grandson作为第三次组件
<father>
  <son>
    <grandson>
    </grandson>
  </son>
</father>

如果father组件要和grandson组件进行通讯，有3种方法可以实现
1.通过props和$emit的方式，需要通过son组件作为中转，father把值传给son，son再把值传给granson，或者grandson把值传给son，son再把值传给father；
2.使用vuex
3.使用中央事件总线bus
使用前2种方式可以能都不太理想，我们来讲下另一种方式
来，上代码：
father组件，传递了name，age, address，habit 4个属性到子组件son

<template>
  <div>
    <son name="lucy" age="16" address="长沙" habbit="basketball"></son>
  </div>
</template>

<script>
import son from './comp/son'
export default {
  components: {
    son
  }
}
</script>

son组件：只接受了name和age 2个属性，其他属性没有接受，使用v-bind="attrs是一个属性，其包含了父作用域中不作为props被识别（且获取）的特性绑定（class和style除外），这些未识别的属性可以通过v-bing="listeners"传入（.native绑原生事件时没有用的）（即父组件传过来的属性，在中间组件的props中定义接收了，就不会传递到grandson组件，未在props中定义接收的，就会传递到grandson组件中去）

<template>
  <div>
    <grandson v-bind="$attrs" v-on="$listeners"></grandson>
  </div>
</template>

<script>
import grandson from './grandson'
export default {
  components: {grandson},
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: String,
      default: ''
    }
  }
}
</script>

grandson组件：

<template>
  <div>
   $attrs的值为： {{$attrs}}
   <!--  结果为：{ "habbit": "basketball" }, 
   在$attrs里面只会有props没有注册的属性,即在props定义了的属性，就不会存在在$attrs -->

   <br>
   {{address}}  <!--  长沙 -->
  </div>
</template>

<script>
export default {
  props: {
    // habbit: {
    //   type: String,
    //   default: ''
    // },
    address: {
      type: String,
      default: ''
    }
  },
  mounted() {
    console.log('$attrs---', this.$attrs)   // { habbit: "basketball" }
    console.log('$listeners---', this.$listeners)  // { isClick: ƒ, asd: ƒ }
    this.$listeners.isClick()   // 666
    this.$listeners.asd();    // 999
  }
}
</script>

总结:
1.v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。

vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

2.v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。

vm.attrs" 传入内部组件——在创建高级别的组件时非常有用。
3.v-on="listeners"：将父组件标签上的自定义事件向下传递，其子组件可以直接通过emit(eventName)的方式调用。
vm.listeners"传入组件内部--在创建更高层次的组件时非常有用。
4.举例说明：

4.1.如上实例代码中，father组件传值给son可以全部不接收，然后直接通过 v-bind="$attrs" 传给grandson，然后grandson组件直接使用props接收top传过来的所有属性

4.2.在别人组件的基础上进行二次封装的时候，定义好自己的属性，然后在自己的组件上直接传值，然后通过 v-bind="$attrs" 把值传给别人的组件即可，例如

<template>
  <div>
    <el-button v-bind="$attrs">确定</el-button>
  <div>
</template>
 
// 父组件使用
<my-button type='primary' size='mini'/>

5.vm.listeners获取到的值都是json的形式，对应每一个属性和取值