在 Vue.js 中，组件是构建应用程序的基本单元。我们可能会遇到不同层级之间需要进行通信的情况。Vue.js 提供了 provide 和 inject 这两个 API 帮助我们实现组件间的跨层级通信。
provide/inject 的基本用法
provide 和 inject 是成对出现的，它们的使用方式如下：
-- -------------------- ---- -------
-- ------------
------ ------- -
-------- -
----------- --------
-
-
-- ------------
------ ------- -
------- ---------------
------- -- -
---------------------------- -- -----
-
-provide 可以提供任何 JavaScript 类型的数据作为值，并且在每个子组件中，通过 inject 注入 provide 对象中提供的数据。
组件跨层级通信例子
下面我们通过一个案例来详细介绍 provide 和 inject 的使用方式。
我们有一个 App.vue 组件作为根组件，包含了 Header.vue 和 Footer.vue 两个子组件。现在我们需要在 Footer.vue 中获取到 Header.vue 组件中的数据。
我们可以在 Header.vue 组件中通过 provide 提供数据，在 Footer.vue 中通过 inject 获取数据。代码如下：
-- -------------------- ---- -------
-- ----------
----------
-----
---------- --------------
--------- -------- -- ------- ------
------
-----------
--------
------ ------- -
------- -- -
------ -
-------- ------ -------
-
-
-
----------- -------------------- ---- -------
-- ----------
----------
-----
---------- --------------
--------- -------- -- ------------- ------
------
-----------
--------
------ ------- -
------- ------------
--------- -
------------- -- -
------ ------------
-
-
-
---------最后，在 App.vue 中引入这两个子组件：
-- -------------------- ---- -------
----------
---- ---------
------- --
------- --
------
-----------
--------
------ ------ ---- --------------
------ ------ ---- --------------
------ ------- -
----------- -
-------
------
-
-
---------这个例子中，我们在 Header.vue 中通过 provide 提供了一个名为 message 的数据，同时在 Footer.vue 中通过 inject 获取了这个数据，并将它作为 headerMessage 的值返回。
这样我们就成功地实现了跨层级组件的通信。
提示和注意事项
- 如果使用 TypeScript，可以使用
@Provide和@Inject装饰器实现。 provide和inject并不是反应式的，意味着如果被提供的值发生了变化，子组件并不会更新。- 如果一些组件在同一个
provide中提供相同的 key，则在子组件中，最近的父组件提供的值将会被使用。
总结
在 Vue.js 中，provide 和 inject API 是跨层级组件通信的有效方式。
我们可以使用 provide 在父层级组件中提供数据，并使用 inject 在子层级组件中获取数据。
使用 provide 和 inject 需要注意一些细节，但是它们提供了一种简单而灵活的方式，帮助我们更好地构建组件间的友好通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651970eb95b1f8cacd19b185