在 Vue.js 中，组件通讯是一个非常重要的话题。为了实现跨组件通讯，我们通常会使用 props 或事件来传递数据、监听事件。然而，当组件嵌套层级比较深时，这种传递数据的方式就会变得非常麻烦。此时，我们可以使用 Vue.js 中提供的 provide/inject API 来解决这个问题。
什么是 provide/inject
provide/inject 是 Vue.js 在 2.2.0 版本中引入的一个新特性，它们提供了一种跨组件通讯的方式，能够帮助我们优雅地解决跨层级组件之间的数据传递和共享。provide 和 inject 都是组件实例的选项，可以在组件定义中使用。
provide：是一个可以返回一个对象或一个函数的函数。在父组件设置了 provide 选项后，它的子孙组件就可以通过 inject 选项来注入这些值，从而实现共享数据的目的。
inject：是一个可以接收一个数组或一个对象的选项。在注入选项中，数组中的字符串对应了该名字的 provide，也有可能是从 provide 中继承的。使用 inject 选项可以在组件中直接调用 provide 中的属性。
如何使用 provide/inject
提供者 provide 和注入器 inject 可以通过父子组件之间的依赖关系进行数据传输。provide 选项应该是一个返回一个对象的函数，该对象包含需要共享的值。inject 选项可以是一个字符串数组或一个对象。字符串数组是一组需要注入的属性名，如果是一个对象，则可以指定属性名和本地绑定名。
-- -------------------- ---- -------
-- ------ --
----------------------- -
------ -
------ -
-------- -----------
-
--
--------- -
------ -
-------------- ------------
-
--
--------- -
-----
--------------------------------
---------------
------
-
--
-- ----- --
---------------------- -
------- ------------------
--------- -
-----
--------------------------------
-------- ------------- ---------
------
-
--当子组件使用 inject 选项时，它需要传递一个数组，该数组包含需要注入的属性名称。在上面的示例中，子组件 child 需要共享父组件中的 message 属性，所以我们注入了 sharedMessage 属性来实现这个目的。
provide/inject 的注意事项
使用 provide/inject 传递数据时，需要注意以下几点：
provide 和 inject 绑定并不是响应式的。这意味着父组件中数据的变化并不会引起子组件数据的更新，需要使用 Vue 实例的响应式数据来替代。
因为 provide 和 inject 绑定并不是响应式的，所以我们应该尽可能避免直接在 provide 中引用父组件实例的数据。在提供者 provide 中传递一个工厂函数，而不是一个对象，也是一个好的选择，因为它可以避免这个问题。
在运行时，实际上是在父组件创建过程中手动挂载所有的子组件实例时设置的 provide。这意味着如果你在 beforeCreate 钩子中使用 provide，它是不会起作用的。
总结
在 Vue.js 中，provide/inject API 提供了一种优雅的方式来解决跨组件通讯的问题。它使得我们可以以更加优雅的方式在组件之间传递数据，无论是父子组件之间，还是跨越多个组件。但同时也需要注意 provide 和 inject 不是响应式的限制，以及不要在 provide 中直接引用父组件的实例数据等注意事项。希望通过这篇文章，你能够更好的理解并掌握 Vue.js 的 provide/inject API 和组件通讯的相关知识。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a52b7248841e98941a453e