vue 的$attrs $listeners

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

//父组件A

import B from './B.vue'
export default {
    name: 'parentA',
     data() {
        return {
          name:"小红",
          age:"18"
        }
     },
     components:{B },
   }
//子组件B

import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
   }
//孙组件C

2，$listener的使用

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

//父组件A

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

import C from './C.vue'
export default {
    name: 'parentB',
    props:["name"]
     data() {
        return { }
     },
     components:{C},
mounted() {
        this.$emit('testB','BBBB');
    }
   }
//孙组件C

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

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