前言
在 Vue.js 中，我们常常需要在子组件中调用父组件的方法。然而，如果处理不当，这个过程可能会变得很繁琐和复杂。本文将介绍如何使用 Vue.js 来优雅地处理子组件调用父组件方法的问题。
问题描述
在 Vue.js 中，子组件可以通过 props 接收父组件传递的数据，但是如果需要调用父组件的方法，就需要使用 $emit 事件来触发父组件中的方法。具体来说，就是在子组件中通过 $emit 触发某个事件，然后在父组件中通过 @event 监听该事件并执行相应的方法。例如：
-- -------------------- ---- -------
---- --- ---
----------
------- ---------------------------------
-----------
---- --- ---
----------
-----
---------------- -----------------------------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-- ------
-
-
-
---------这种方式虽然可以实现子组件调用父组件方法的功能，但是当组件嵌套层级较深时，就会变得非常繁琐和复杂。例如：
-- -------------------- ---- -------
---- --- ---
----------
------- ---------------------------------
-----------
---- ------- ---
----------
-----
---------------- -----------------------------------
------
-----------
---- --- ---
----------
-----
-----------------
-----------------
---------------- -----------------------------------
------------------
------------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-- ------
-
-
-
---------在这种情况下，每个子组件都需要通过 $emit 触发事件，父组件也需要在每个子组件中监听事件并执行相应的方法，这样就会使代码变得非常冗长和难以维护。
解决方案
为了解决这个问题，我们可以使用 Vue.js 的 provide / inject API。provide 允许父组件向其所有子孙组件提供数据，而 inject 允许子孙组件访问父组件提供的数据。通过这个 API，我们可以将父组件的方法提供给所有子孙组件，从而避免在每个子组件中都使用 $emit 触发事件的问题。
具体来说，我们可以在父组件中使用 provide 提供一个对象，该对象包含所有需要提供给子孙组件的方法。然后，在子孙组件中使用 inject 来访问这些方法。例如：
-- -------------------- ---- -------
---- --- ---
----------
-----
-----------------------------------
------
-----------
--------
------ ------- -
--------- -
------ -
---------- --------------
-
--
-------- -
----------- -
-- ------
-
-
-
---------
---- --- ---
----------
------- ------------------------------
-----------
--------
------ ------- -
------- -------------
-
---------在这个例子中，父组件提供了名为 handleAdd 的方法，该方法可以被所有子孙组件访问。在子组件中，我们使用 inject 来访问 handleAdd 方法，并将其绑定到按钮的 @click 事件上。这样，当按钮被点击时，就会调用父组件中的 handleAdd 方法。
总结
在 Vue.js 中，使用 provide / inject API 可以优雅地处理子组件调用父组件方法的问题。通过将父组件的方法提供给所有子孙组件，我们可以避免在每个子组件中都使用 $emit 触发事件的问题，从而使代码更加简洁和易于维护。
示例代码
下面是一个完整的示例代码，演示了如何使用 provide / inject API 来处理子组件调用父组件方法的问题：
-- -------------------- ---- -------
---- --- ---
----------
-----
-----------------------------------
------
-----------
--------
------ ------- -
--------- -
------ -
---------- --------------
-
--
-------- -
----------- -
-- ------
-
-
-
---------
---- --- ---
----------
------- ------------------------------
-----------
--------
------ ------- -
------- -------------
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dd861f1886fbafa4ade442