在 Vue.js 中，组件通信是非常重要的一个话题。通常情况下，我们可以使用 props 和 emit 方法来实现组件通信。但是，这种方式在组件层级非常深的情况下可能会变得非常麻烦和冗长。为了解决这个问题，Vue.js 提供了另外一种组件通信方式：provide/inject。
provide/inject 是什么？
provide/inject 是一个高级特性，它允许父组件向子孙组件提供数据，而无需通过 props 一级一级地传递数据。实际上，这种方式可以将数据注入到整个组件树中的任何组件中。
通过 provide 属性在父组件中提供数据，然后在子孙组件中使用 inject 属性来将数据注入。请注意 provide/inject 不保证响应式，并且不适用于动态增加子组件的情况。
在提供数据时，我们需要使用一个 key/value 对。这个 key 就是我们提供给子组件的数据的名称，而 value 则是它的值。在注入数据时，我们只需要使用与提供时相同的 key，就可以在子组件中获得父组件提供的数据了。
provide/inject 的使用
在父组件中，我们可以使用 provide 属性来提供数据给子孙组件。以下是一个示例：
-- -------------------- ---- -------
----------
-----
---- ---- ---
----------- ---------------
-----------------------
-----------------------
-------------
------
-----------
--------
------ --------- ---- -----------------
------ ------- -
----------- -
---------
--
------ -
------ -
------ -------- ---- ----------- ---- ------ ------------
-
--
--------- -
------ -
------ ----------
-
-
-
---------在这个例子中，我们在父组件中提供了一个名为 books 的数据给子组件 BookShelf 使用。在子组件中，我们可以使用 inject 属性来注入数据。以下是一个示例：
-- -------------------- ---- -------
----------
-----
-----------
----
-------------
-----
------
-----------
--------
------ ------- -
------- ---------- -- ----------
------ -
------ -
----------------- -
-
--
-------- -
---------- -
-----------------------
--
---------------- -
------ ---------------------------------
-
-
-
---------在这个例子中，我们在子组件中使用 inject 属性来注入父组件中提供的数据 books。现在，我们可以在子组件方法中访问到父组件中提供的数据了。
在子孙组件中使用 provide 和 inject 也是同样的方式，因为它们的工作原理是相同的。
总结
使用 provide/inject 可以让我们更简单方便地进行跨级组件通信，并将数据注入到整个组件树中的任何组件中。它是 Vue.js 中非常重要和强大的一种组件通信方式。在使用时需要注意保持提供和注入数据的 key 一致，并且不建议在动态增加子组件的情况下使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458a4c0968c7c53b0afae7d