vue 的$attrs $listeners

组件多级嵌套，相互传递如何实现的
A：父组件
B：子组件
C：孙组件
在开发过程中，有时候想把某些数据从A组件传递给C组件，用Props的话么，可以先将数据从A--->B---->C,但是看起来不是很帅气。
那么listeners就是来解决这个问题的
1）$attr
继承所有的父组件属性（除了prop传递的属性、class和style）

//父组件A
<template>
  <b :name='name' :age='age'/>
</template>
import B from './B.vue'
export default {
    name: 'parentA',
     data() {
        return {
          name:"小红",
          age:"18"
        }
     },
     components:{B },
   }
//子组件B
<template>
  <div>
    <div>{{name}}</div>
    <div>{{$attrs.age}}</div>
    <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） --> 
     <c v-bind="$attrs" v-on="$listeners"/>
 </div>
</template>
import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
   }
//孙组件C
<template>
      <div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
 name:'C'
}
</script>

2，$listener的使用

$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器，它可以通过 v-on=”$listeners” 传入内部组件。

//父组件A
<template>
  <b :name='name' :age='age' v-on:testB="onB" v-on:testC="onC" />
</template>
import B from './B.vue'
export default {
    name: 'parentA',
     data() {
        return {
          name:"小红",
          age:"18"
        }
     },
     components:{B },
methods: {
         //b传回来的数据
        onB(msg) {
            console.log('我是B：',msg);
        },

        // c 传回来的数据
        onC(msg) {
            console.log('我是C：',msg);
        }
    }
   }
//子组件B
<template>
  <div>
    <div>{{name}}</div>
    <div>{{$attrs.age}}</div>
    <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） --> 
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
     <c v-bind="$attrs" v-on="$listeners"/>
 </div>
</template>
import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
mounted() {
        this.$emit('testB','BBBB');
    }
   }
//孙组件C
<template>
      <div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
 name:'C'
mounted() {
        this.$emit('testC','CCCC');
    }
}
</script>

通俗的讲$ attrs+$ props = 在使用组件时定义的所有属性，不包括事件

那么在当前组件中使用v-bind="$attrs"，v-bind="$props"，v-on="$listeners"也就是把之前父组件那里给它的属性再全部传到它的子组件。