组件多级嵌套，相互传递如何实现的
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"也就是把之前父组件那里给它的属性再全部传到它的子组件。
