在 Vue.js 中，如果多个组件需要共享同一些数据，我们可以通过父子组件传递 props、通过 vuex 进行状态管理或者使用 Vue.js 提供的 provide 和 inject。本文将重点介绍如何使用 provide 和 inject 实现数据共享的方法，并给出示例代码。
provide 和 inject 的基本用法
provide 和 inject 是 Vue.js 的两个 API，它们一起使用可以实现数据的上下文传递。provide 和 inject 的使用方法如下：
-- -------------------- ---- -------
-- ----- ------- --
------ ------- -
------- -- -
------ -
---- -----
-
-
-
-- ----- ------ ---- ------- --
------ ------- -
------- --------
------- -- -
--------------------- -- ---
-
-在父组件中，我们使用 provide 对象返回一个对象，对象里面包含我们要共享的数据。在子组件中，我们可以通过传入一个数组并使用 inject 属性访问父组件的数据。
实现联级组件的数据共享
在很多时候，我们需要在多层嵌套的组件中进行数据共享，这时候可以通过父组件和子组件的 provide 和 inject 配合使用来实现联级组件的数据共享。
比如，在一个列表页中嵌套了一个搜索组件，当搜索组件触发搜索操作的时候，我们需要将搜索关键词传递给列表组件，以便重新渲染列表：
-- -------------------- ---- -------
-- ----- ----------- --
------ ------- -
---- -- -
------ -
------------ ----
-
--
------- -- -
------ -
------------ ----------------- -- - ----------- --------
------- -- -- -
------------- -- ------
-
-
-
-
-- ----- ------ -- ----------- --
------ ------- -
------- --------------- ----------
-------- -
------ -- -
-----------------------------------------
-------------
-
-
-在这个例子中，父组件提供了 searchQuery 和 update 两个数据，searchQuery 是提供给子组件的数据，update 是定义子组件中搜索操作时更新列表的方法。子组件通过 inject 获取父组件提供的 searchQuery 和 update 并实现搜索操作。
示例代码
在这个例子中，我们将实现一个简单的留言板组件，需要实现以下几个功能：
- 用户可以发布留言；
- 用户可以回复留言；
- 用户可以编辑留言。
我们首先定义留言板的数据结构：
-- -------------------- ---- -------
-
-------------- -
-
----- --
---------- ------- ------
------------ -
-
----- --
---------- -------
-
-
-
-
-我们需要在留言列表组件中获取该数据，并将其传递给子组件 Comment 组件。同时，Comment 组件需要将用户发布的留言通过 provide 传递给其子组件 Reply 组件和 Edit 组件，用于实现回复和编辑操作。
留言列表组件的代码如下：
-- -------------------- ---- -------
----------
---- ---------------------
------------
--------
-------------- -- ------------
-----------------
------------------
--
------
-----------
--------
------ ------- ---- ---------------
------ ------- -
----------- - ------- --
---- -- -
------ -
------------ -
-
--- --
-------- ------- ------
---------- -
-
--- --
-------- -------
-
-
-
-
-
-
-
---------
------ -------
------------- -
------- -----
-
--------Comment 组件的代码如下：
-- -------------------- ---- -------
----------
---- ----------------
----- --------------- ------
------ ------------ -- ------------------ --------------- -------------- --
------- -------------------------------
----- ------------------ ------------------ --
------
-----------
--------
------ ----- ---- -------------
------ ---- ---- ------------
------ ------- -
----------- -
------
----
--
------ -
-------- -
----- -------
--------- ----
-
--
---- -- -
------ -
------------ -----
-
--
------- -- -
------ -
-------- -------------
----------- -- -- -
-----------------
-
-
--
-------- -
---------- -- -
---------------- - -----------------
--
---------- -- -
---------------- - ----
-
-
-
---------
------ -------
-------- -
------- -----
------- --- ----- -----
-------- -----
--------- ---------
-
--------Reply 组件的代码如下：
-- -------------------- ---- -------
----------
---- ------------- -------------
----- ------------- ------
------
-----------
--------
------ ------- -
------ -
------ -
----- ------
-
--
------- -----------
-
---------
------ -------
------ -
------------ -----
------------ --- ----- -----
------------- -----
------ -----
-
--------Edit 组件的代码如下：
-- -------------------- ---- -------
----------
---- ------------ ---------------
--------- ------------------------ ---------------------------------
------- ------------------------------------
------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
--------- ----
-
--
---- -- -
------ -
-------- -----
-
--
------- ---------------
------- -- -
-----------------
--
-------- -
------------ ------- -
-------------------- - ------------------
-
-
-
---------
------ -------
----- -
--------- ---------
---- -----
----- -----
------ -----
------- --- ----- -----
-------- -----
----------- -----
-
----- -------- -
------ -----
------- ------
------- --- ----- -----
-------------- ----
-------- -----
----------- -----------
------- -----
-
----- ------ -
------- ---- --
-------- -----
------- -----
-------------- ----
----------- --------
------ -----
------- --------
-------- -----
-
----- ------------ -
----------- --------
-
--------在这个例子中，我们通过 provide 和 inject 实现了留言、回复以及编辑的功能，实现了跨多级组件的数据共享。
总结
本文介绍了如何使用 Vue.js 的 provide 和 inject 实现数据的上下文传递，以及如何通过 provide 和 inject 实现多级组件的数据共享。provide 和 inject 是 Vue.js 中实现跨多级组件数据共享的重要API，可以大大提高组件的数据复用性和灵活性。使用 provide 和 inject 的方法可以大大提高代码的可维护性和可扩展性，是值得推荐使用的一种方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6527f7ee7d4982a6eba89c5b