在 Vue.js 开发中，通常会涉及到多个组件之间需要共享同一个数据的情况，这时就需要使用 provide 和 inject 来实现跨组件间的数据共享。
提供者 provide 和注入者 inject
Vue.js 提供了两个 API，分别是 provide 和 inject，用于提供数据和注入数据。在父组件中使用 provide，将数据注入到子组件中，在子组件中使用 inject 去获取数据。
provide 的用法
provide 的用法很简单，直接在父组件中定义一个 provide 属性，然后将需要共享的数据作为 provide 属性的值即可。
具体代码如下：
-- -------------------- ---- -------
----------
-----
-----------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
-------- -
--------- ------- ------ ------
--
----------- -
--------------
-
-
---------在这个例子中，我们定义了一个 comments 数组作为 provide 属性的值，这个数组中保存了一些评论数据。
inject 的用法
在子组件中使用 inject 来获取父组件中提供的数据。
具体代码如下：
-- -------------------- ---- -------
----------
-----
----
--- ---------------- ------ -- --------- -----------------------------
-----
------
-----------
--------
------ ------- -
------- ------------
-
---------在这个例子中，我们通过 inject 来注入了 comments 数据，并在组件中使用 comments 数组渲染评论列表。
provide 和 inject 的注意点
- provide 和 inject 绑定并不是可响应的。
- provide 和 inject 绑定的类型只能是 Object 或者返回 Object 的函数。
- provide 和 inject 绑定的上下文并不是 Vue 实例本身，而是渲染组件树的关系。
- 如果依赖注入的 Key 是相同的，那么 provide 中的数据会覆盖 inject 中的数据。
示例代码
我们可以通过下面的代码来演示在 Vue.js 中使用 provide/inject 实现跨组件间数据共享。
父组件
-- -------------------- ---- -------
----------
-----
------------
-----------------------------------
-----------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
-------- -
--------- ------- ------ ------
--
----------- -
--------------
-
-
---------子组件
-- -------------------- ---- -------
----------
-----
------------
----
--- ---------------- ------ -- --------- -----------------------------
-----
------
-----------
--------
------ ------- -
------- ------------
-
---------通过上面的代码，我们可以成功地实现了父子组件之间的数据共享。
总结
在 Vue.js 中使用 provide 和 inject API 来实现跨组件间的数据共享非常方便，但也需要注意一些细节问题。通过本文的学习，相信大家已经能够快速理解并使用这一特性了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3d6b848841e9894040436