- vue的通信方法常用的有，父传子 props， 子传父 通过绑定@事件，子组件
$emit传值，也可以父组件给子组件props传递一个函数，子组件调用函数，利用参数传值。 - 其他的还有vuex集中状态管理，eventBus也就是事件的全局
$emit,$on来抛发事件传值 - 以及接下来的
$attrs、$listeners。其实这两个属性的模式，也就是父组件A把很多数据传给子组件B，子组件B利用$attrs收集起来，然后可以利用v-bind="$attrs"在传给B的子组件C（也就是A组件的孙组件），这样就不用一个一个属性去传了。至于$listeners与$attrs类似，$listeners传递的是事件，在子组件以及孙组件通过$emit触发事件。
$attrs
官方解释：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
简言之：
接收除了props声明外的所有绑定属性（class、style除外）
//parent组件
<template>
<div>
<Son :name='name' :age='age'/>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Eric',
age: '20'
}
}
}
</script>
//Son组件
<template>
<div>
//此时Son组件把从父组件传来的数据，在传给孙组件
<GrandSon v-bind='$attrs'/>
</div>
</template>
<script>
export default {
props: ['name'],
mounted() {
//父组件共传来连个值，一个name， 一个age，由于name被props接收了，故$attrs 只有age属性
console.log(this.$attrs) //{age: '20'}
}
}
</script>
//GrandSon组件
<template>
<div>
这是孙组件
</div>
</template>
<script>
export default {
mounted() {
//这样父祖组件就把数据传到了孙组件
console.log(this.$attrs) // {age: '20'}
}
}
</script>
$listeners
官方解释：
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
简言之：
接收除了带有.native事件修饰符的所有事件监听器
//parent组件
<template>
<div>
<Son @eventOne='eventHandler' @click.native='clickHandler'/>
</div>
</template>
<script>
export default {
methods: {
eventHandler() {
console.log('触发了Parent中的eventHandler')
},
clickHandler() {
console.log('触发了Parent中的clickHandler')
}
}
}
</script>
//Son组件
<template>
<div>
//此时Son组件把从父组件传来的监听器，在传给孙组件
<GrandSon v-on='$listerners'/>
</div>
</template>
<script>
export default {
mounted() {
//父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件
console.log(this.$listerners) //{eventOne: fn}
this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
}
}
</script>
//GrandSon组件
<template>
<div>
这是孙组件
</div>
</template>
<script>
export default {
mounted() {
//这样孙组件通过emit触发Parent组件中的监听函数
console.log(this.$listerners) // {eventOne: fn}
this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
}
}
</script>
