Vue3中的组件通信方式

代码是vue3.2的

1、props 父向子通信
2、emit 子向父通信
3、v-model 父向子通信
4、refs 子向父通信
5、provide/inject 父向子、兄弟之前通信
6、eventBus 父向子通信(Vue3移除) 【官方推荐使用 mitt 或 tiny-emitter，使用pubsub-js也可以】
7、vuex/pinia 父子、子父间通信

eventBus在Vue3中移除的原因，盲猜可能是出于更好的性能考虑吧，也有可能是为了更贴切我们日常的编程直觉吧。毕竟实现一个简单的 EventBus 需要生成一个复杂的 Vue 实例感觉不是太好，借助于一些专注的库来实现这个功能应该会更好。
1、Props【父向子通信】
props 是 Vue 中最常见的父子通信方式
父组件代码如下：

就是下面这段代码的简写形势

<ChildComponent :title=“pageTitle” @update:title=“pageTitle = $event” />

子组件代码：

<button @click=“handleAdd” class=“btn btn-primary” type=“button”>添加

复制代码
在子组件中先定义props和emits，然后添加完成之后emit指定事件
注：update:*是Vue中的固定写法，*号表示props中的某个属性名
父组件中使用就比较简单，代码如下：

• 
  
• {{ i }}
• 
  

复制代码
4、Refs【子向父通信】
在使用vue2的Options API时，可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用这种方式获取。如果想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了
父组件代码如下：

• 
  
• {{ i }}
• 
  

复制代码
子组件代码如下：

<button @click=“handleAdd” class=“btn btn-primary” type=“button”>添加

复制代码
setup组件默认是关闭的（相当于单独的封装好的盒子），即通过模板ref获取到的组件的公开实例，不会暴露任何在

复制代码
子组件代码如下：

• 
  
• {{ i }}
• 
  

复制代码
值得注意的是使用provide进行数据传递时，尽量用readonly进行数据的包装，避免子组件修改父级传递过去的数据
6、eventBus【父子间通信】
Vue3 中移除了 eventBus，但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter，使用pubsub-js也可以
在大多数情况下，不建议使用全局事件总线来实现组件通信。虽然比较简单粗暴，但是维护事件总线从长远来看是个大问题
7、vuex/pinia【父子、子父间通信】
Vuex 和 Pinia 是 Vue3 中的状态管理工具，使用这两个工具可以轻松实现组件通信，有关详细信息，参阅官方文档即可