Vue2和Vue3中组件间通信有哪⼏种⽅式

一、Vue2中组件间通信

1. props/$emit

这是最基本的通信方式，父组件通过props向子组件传递数据，子组件通过$emit触发事件与父组件通信。props是单向数据流，只能由父组件传递给子组件，而且子组件无法修改这些数据。如果需要双向绑定，可以使用v-model指令，它实际上是语法糖，结合了props和$emit。

2. 全局事件总线（Global Event Bus）

这是一种实现任意组件间通信的方式，通过创建一个全局的Vue实例作为事件总线，组件可以向总线发送事件，其他组件可以监听这些事件并进行响应。这种方式不需要组件之间有明确的父子关系，但需要注意避免事件命名冲突。

3. $refs

通过在父组件中对子组件使用ref属性，父组件可以直接访问子组件的数据和方法。这种方式通常用于父子组件间的直接通信，但应谨慎使用，以避免破坏组件的封装性。

4. provide/inject

父组件通过provide提供数据或方法，子组件通过inject来接收这些数据或方法。这种方式主要用于解决跨层级组件间的通信问题，但同样需要注意维护组件的封装性和复用性。

5. Vuex

通过集中管理的状态库Vuex来共享状态，任何组件都可以通过store来访问和修改状态。Vuex适用于大型应用中多个视图依赖于同一状态的场景，能够有效地管理和同步状态。

6. 插槽（Slot）

插槽是一种将模板的一部分定义在父组件中，但在子组件的模板中进行展示的技术。这种方式主要用于内容的分发，而不是数据的通信。

7. 动态组件 & keep-alive

通过动态组件和keep-alive可以实现组件间的通信，keep-alive可以缓存不活动的组件实例，避免重复渲染和销毁。

---

二、Vue3中组件间通信

1. Props

这是父组件向子组件传递数据的一种方式。父组件通过数据绑定的形式声明要传递的数据，子组件则需要通过`defineProps()`方法创建props来接收这些数据。

2. Emit

子组件通过`$emit`方法向父组件发送事件，父组件可以监听这些事件并进行相应的处理。这种方式常用于子组件向父组件传递信息。

3. V-Model

这是Vue中特有的双向数据绑定语法糖，它实际上是`value`属性和`input`事件的结合体。在自定义组件中使用`v-model`时，需要同时使用`modelValue`属性和`$emit('update:modelValue', value)`方法来实现双向绑定。

4. Ref和defineExpose

`ref`是Vue中的一个基本响应式数据类型，可以用来在父组件中访问子组件或DOM元素。`defineExpose`则用于在子组件中定义可以被父组件通过`ref`访问的公共属性或方法。

5. Provide/Inject

这是一种跨层级的组件通信方式，允许父级组件提供数据，子级组件注入这些数据。这种方式主要用于解决深层嵌套组件之间的通信问题。

6. EventBus（也叫Bus）

通过创建一个全局的EventBus实例，组件可以在这个实例上触发事件和监听事件，实现跨组件的通信。

7. Vuex/Pinia

这是Vue的状态管理库，用于集中管理应用程序的所有状态。通过它们，组件可以共享状态，实现更复杂的跨组件通信。

8. Slot（插槽）

插槽是一种将模板的一部分定义为可替换的机制，通常用于组件内容的分发，也可以用于组件间的通信。

9. Mitt.js

这是一个独立的事件发射器和监听器库，可以用来实现组件间的通信，尤其是在没有Vue实例的情况下。

10. getCurrentInstance

虽然`getCurrentInstance`本身不是用于组件通信的，但它可以用来获取当前组件实例，从而访问其他组件实例的属性和方法。