Vue中provideinject如何实现跨组件数据共享？

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

在组件式开发中，最大的痛点往往在于组件之间的通信。Vue 提供了多种组件通信方式，从基础的 props 和 $emit 到用于兄弟组件通信的 EventBus，再到全局数据管理的状态管理库。

- 基础的 props 和 $emit：通过 props 向子组件传递数据，通过 $emit 向父组件发送事件。- 兄弟组件通信的 EventBus：适用于跨组件通信，不依赖于组件树结构。- 全局数据管理的状态管理库：如 Vuex，用于全局数据的管理和共享。

众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 props/$emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。

在这么多的组件通信方式中，provide/inject 显得十分阿卡林（毫无存在感）。但是，其实 provide/inject 也有它们的用武之地。今天，我们就来聊聊 Vue 中 provide/inject 的应用。

何为 provide/inject

provide/inject 是 Vue 在 2.2.0 版本新增的 API，官网介绍如下：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。