Vue——组件通信

1.组件通信常用方式有以下8种：

• props
• $ emit / $on
• $children / $parent
• $ attrs / $listeners
• ref
• $ root
• eventbus
• vuex

当然vue3中有一些变化，比如说 $ on、$children 都已经废除了，甚至 eventbus 其实在vue3中用起来也不是那么方便了

2.根据组件之间关系讨论组件通信最为清晰有效

• 父子组件
  props / $emit / $parent / ref / $attrs

• 兄弟组件
  $parent / $root / eventbus / vuex

• 跨层级关系
  eventbus / vuex / provide + inject

父子组件：我们可以使用 $emit ，当然我们也可以在子代通过$parent访问它的父代，在父代中又可以通过 ref 的方式去访问子代，那如果爷孙之间想要透穿属性怎么办呢，我们可以使用$attrs这种方式去做

兄弟组件：两个人之间没有关系怎么办？可以通过桥接（$parent / $root ），甚至自己手写一个 eventbus ，当然我们也可以使用大家熟知的vuex 之类的这种状态管理做中间人。

跨层级关系：两个人之间没有直接的关系了，我们可能只能使用vuex这种方式了，又或者说我们可以通过从上往下注入的方式provide + inject这样的一组api来进行参数的传递