在使用vue时，我们经常会把不同的模块拆分成不同的组件，而组件之间有的需要传递数据，所以组件间的数据通信就非常重要了。

而在vue中，组件之间的关系大致可以分为以下两种：

• 父子组件之间通信

• 非父子组件之间通信（兄弟组件、祖孙组件等）

1. props/$emit

对于父子组件通信而言，最简单的方式就是 利用 props。 父组件可以通过props的方式向子组件传递数据，而子组件通过$emit可以向父组件通信。

父组件：

子组件：

利用props将父组件数据传递给子组件
注意点：
1、props只可以从上一级组件传递到下一级组件（即父子组件），即所谓的单向数据流。【如有需要，可以通过data属性接收或使用computed属性进行转换】
2、props只读，不可被修改，所有修改都会失效并警告。

子组件想将数据传递给父组件时，使用 $emit触发自定义事件，父组件使用v-on（缩写为@）来监听事件

2. refs

父组件获取子组件的属性或者调用子组件方法

子组件：

父组件：

3. provide/inject

provide/inject 是 Vue中提供的一对API。无论层级多深，API都可以实现父组件到子孙组件的数据传递。

provide：提供一个值，可以被后代组件注入

inject： 注入一个由祖先组件或整个应用提供的值

父组件：

子组件：

4. eventBus

eventBus，又称事件总线，其原理就是 事件订阅发布。在vue中可以使用它来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以通知其他组件。

但是vue3中移除了eventBus，但是可以借助第三方工具，如mitt来实现。其原理还是eventBus

使用步骤：

安装：
cnpm i mitt -S

封装：

import mitt from 'mitt'
const mitt = mitt()
export default mitt

使用：

组件1：

组件2：

5. vuex/Pinia

Vuex 和 Pinia 是 Vue 3 中的状态管理工具，使用这两个工具可以轻松实现组件通信