vue组件通信props：父组件向子组件传值。 $emit：子组件调用父组件方法。 $attrs & $listen

props：父组件向子组件传值。
$emit：子组件调用父组件方法。
$attrs & $listeners
provide & inject：父组件向子孙组件传值。
vuex：状态管理
Observable
eventBus：兄弟组件或多层嵌套组件间的通讯。
$refs
slot-scope & v-slot：插槽
scopedSlots
$parent & $children & $root

`$attrs` & `$listeners`

attrs

子组件可接收父组件中除props内声明外的所有绑定属性（class、style除外）；

在孙子组件中可以通过v-bind="$attrs"继续向下传递属性；

如果想要添加其他属性，可继续绑定属性。但要注意的是，继续绑定的属性和 $attrs 中的属性有重复时，继续绑定的属性优先级会更高。

$listeners

接收除了带有.native事件修饰符的所有事件监听器，可以通过 on="$listeners"将事件监听器继续向下传递，让 grandson.vue 访问到事件，且可以使用 $emit 触发 parent.vue 的函数。

如果想要添加其他事件监听器，可继续绑定事件。但要注意的是，继续绑定的事件和 $listeners 中的事件有重复时，不会被覆盖。当 grandson.vue 触发 customEvent 时，child.vue 和 parent.vue 的事件都会被触发，触发顺序类似于冒泡，先到 child.vue 再到 parent.vue。

使用场景

子孙组件传值时使用；
对一些UI库进行二次封装时使用：比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候 $attrs和$ listners是个完美的解决方案。

eventBus

初始化---全局定义

全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上。

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();

触发事件

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)

监听事件

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行的代码
})

移除监听事件

为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName')

vue组件通信

$attrs & $listeners

eventBus

`$attrs` & `$listeners`