Vue.js 是一款非常流行的前端 MVVM 框架，它可以用来构建复杂的单页面应用。在 Vue.js 中，组件是重要的组织方式，但是在组件之间进行通信却是一大难题。本文将为你介绍一些实际开发中常见的父子组件通信问题，并提供解决方案，让你能够更好地理解 Vue.js 的组件通信机制。
父组件向子组件传递数据
在 Vue.js 中，父组件向子组件传递数据是一种非常常见的操作。假设我们有一个父组件 Parent，包含一个子组件 Child，并且需要向 Child 传递一个 message 数据：
-- -------------------- ---- -------
----------
-----
------ ---------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
---- -- -
------ -
-------- ------- -------
-
-
-
---------在上面的代码中，我们使用了 v-bind 更新了 Child 组件的 props，在 Child 组件中可以通过 this.$props 获取传递的数据。
-- -------------------- ---- -------
----------
------- ------- --------
-----------
--------
------ ------- -
------ -
-------- -
----- -------
-------- --
-
-
-
---------子组件向父组件发送事件
在一些复杂场景中，子组件需要向父组件发送一些信息，例如用户点击触发的事件。在 Vue.js 中，我们可以通过依赖注入的方式和 $emit 方法来实现子组件向父组件发送事件。
首先，我们需要在父组件中通过 provide 方法提供一个 eventBus 对象：
-- -------------------- ---- -------
----------
-----
---------------
------
-----------
--------
--- -------- - --- -----
------ ------- -
------- -- -
------ -
--------
-
-
-
---------然后，在子组件中，我们可以通过 inject 方法依赖注入 eventBus 对象，并使用 $emit 方法来触发事件：
-- -------------------- ---- -------
----------
------- ---------------------- ------------
-----------
--------
------ ------- -
------- -------------
-------- -
------- -- -
---------------------------- ------- ----------
-
-
-
---------在上面的代码中，我们通过 inject 方法依赖注入了父组件提供的 eventBus 对象，然后使用 $emit 方法触发了 click 事件，并传递了一个字符串参数。
最后，在父组件中，我们可以使用 mounted 钩子函数来监听 click 事件：
-- -------------------- ---- -------
----------
-----
----- ------- ------
---------------
------
-----------
--------
--- -------- - --- -----
------ ------- -
------- -- -
------ -
--------
-
--
------- -- -
-------------------------- ------- -- -
------------ - -------
--
--
---- -- -
------ -
-------- --
-
-
-
---------在上面的代码中，我们通过 $on 方法监听了 click 事件，当事件被触发时，更新了 message 数据。最后，我们在模板中展示了 message。
总结
在 Vue.js 中，父子组件通信是一个非常常见的问题，但是有了这些技巧，我们可以更加方便地进行组件通信。在实际项目中，我们应该灵活运用这些技巧，根据实际需求编写出高效、易维护的组件。完整代码如下：
-- -------------------- ---- -------
---- ---------- ---
----------
-----
----- ------- ------
---------------
------
-----------
--------
--- -------- - --- -----
------ ------- -
------- -- -
------ -
--------
-
--
------- -- -
-------------------------- ------- -- -
------------ - -------
--
--
---- -- -
------ -
-------- --
-
--
----------- -
-----
-
-
---------
---- --------- ---
----------
------- ---------------------- ------------
-----------
--------
------ ------- -
------- -------------
-------- -
------- -- -
---------------------------- ------- ----------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648032e948841e9894fb0ac8