前言：
vue通信手段有很多种，props/emit、vuex、event bus、provide/inject 等，还有$attrs和$listeners，主要用于隔代传值

1、$attrs

官方解释：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)
理解：接收除了props声明外的所有绑定属性（class、style除外）

输出结果：{age: “20”,gender: “man”}
父组件A

<template>
  <B_zujian  msg='123'/>
</template>

子组件B

<template>
   <C_zujian v-bind="$attrs"/>
</template>

孙组件C

<template>
  <div>A传递过来的值:{{msg}}</div>
</template>
 
<script>
export default {
  name: 'c_zujian',
  props: {
    msg:{ //接收A组件传递的值 msg
      typeof:String,
      default:''
    }
  },
}
</script>

2、$listeners

官方解释：包含了父作用域中的 (不含.native修饰器的)v-on事件监听器，主要用于底层组件向高层组件传递信息。
理解：接收除了带有.native事件修饰符的所有事件监听器

C组件

<template>
  <div @click="hanleClick">C组件</div>
</template>
 
hanleClick(){
  this.$emit("transmitNews",'123')
}

B组件

<template>
  <c_zujian v-on="$listeners"/>
</template>

A组件

<template>
  <b_zujian @transmitNews='jieShouTransmitNews'/>
</template>
 
methods:{
  jieShouTransmitNews(val){
    console.log(val) //123
  }
}

总结：

1、这可以理解成穿透，多层组件监听
2、用于多层级组件之间的通信
3、高层级向底层级传值 v-bind=‘$attrs’

4、低层级向高层级传值 v-on=“$listeners”