Vue2与Vue3组件间10大通信途径总结梳理？

本文共计3694个文字，预计阅读时间需要15分钟。

目录- props- emit- attrs 和 listeners- provide / inject- parent / children- exposeRef- EventBus / mitt- Vue 中组件通信方式

Vue 中组件通信方式有很多，其中 Vue2 和 Vue3 在实现上存在一些差异。

Vue2

1. props：用于父组件向子组件传递数据。

2.events：子组件通过 emit 发送事件，父组件监听这些事件。

3.attrs 和 listeners：将所有非 prop 的属性传递给子组件，并允许父组件监听子组件上的事件。

4.provide / inject：允许跨组件树传递数据。

5.parent / children：通过组件的 parent 和 children 属性访问父组件和子组件。

6.exposeRef：在 Vue3 中，可以通过 exposeRef 将响应式引用暴露给父组件。

7.EventBus / mitt：通过全局事件总线实现组件间通信。

Vue3

1. props：与 Vue2 相同，用于父组件向子组件传递数据。

2.emit：子组件通过 emit 发送事件，父组件监听这些事件。

3.attrs 和 listeners：与 Vue2 相同，将所有非 prop 的属性传递给子组件，并允许父组件监听子组件上的事件。

4.provide / inject：与 Vue2 相同，允许跨组件树传递数据。