Vue.js 是一款流行的前端框架，其组件化的架构为我们提供了一种轻松构建交互式前端应用程序的方式。在 Vue.js 中，组件之间经常需要传递消息。为了实现这一点，Vue.js 提供了 $emit 和 $on 方法。
在本文中，我们将深入探讨 Vue.js 中的 $emit 和 $on 方法，研究它们如何在组件之间传递消息，以及如何使用它们来处理这些消息。
$emit 和 $on 方法
$emit 方法可以让我们在一个组件的事件中传递消息。例如，我们可以在一个组件中使用 $emit 方法来触发事件，这样其它组件就可以监听到这个事件，进而执行相关的处理。
$on 方法可以让组件监听事件。当事件被触发时，$on 方法会执行相应的回调函数。这个回调函数可以实现我们需要的响应逻辑。
下面是 $emit 和 $on 方法的基本语法：
// 发送消息
this.$emit('eventName', arg1, arg2, ...);
// 监听消息
this.$on('eventName', function(arg1, arg2, ...) {
// 响应逻辑
});这里的 eventName 是一个字符串，它用于标识一个事件。arg1、arg2 等参数是我们需要传递的消息内容。
实例演示
为了更好地理解 $emit 和 $on 方法，我们来看一个实例。
在这个实例中，我们创建了两个组件：Sender 和 Receiver。Sender 组件通过 $emit 方法向 Receiver 组件发送消息，而 Receiver 组件通过 $on 方法监听 Sender 组件发送的消息。
-- -------------------- ---- -------
-- ------ --
----------------------- -
--------- -
-----
---------- --------------
------- ------------------------- ----------------
------
--
-------- -
------------- -
----------------------- ------ --------
-
-
---
-- -------- --
------------------------- -
--------- -
-----
------------ --------------
----- ------- ------
------
--
------ -
------ -
-------- --
--
--
--------- -
--------------------- ----- -- -
------------ - ----
---
-
---
-- -- --- --
--- --- - --- -----
--- -------
--------- -
-----
-----------------
---------------------
------
-
---在这个例子中，Sender 组件中定义了一个 sendMessage 方法，用于向 Receiver 组件发送消息。当按钮被点击时，sendMessage 方法通过 $emit 方法发起一个 onMessage 事件，并且传递了一个字符串参数。
另一方面，Receiver 组件在 created 生命周期中通过 $on 方法监听 onMessage 事件，并且在收到事件时更新自己的 data 状态。
最后，我们在 Vue 实例中将 Sender 和 Receiver 组件渲染到页面上。当用户点击 Sender 组件的 Send Message 按钮时，Receiver 组件就会接收到 Sender 组件发送的消息，并且更新页面上的消息内容。
总结
在 Vue.js 中，组件之间的消息传递是非常重要的。$emit 和 $on 方法为我们提供了一种简单且有效的方式来实现这个功能。
在本文中，我们从 $emit 和 $on 方法的基本语法入手，深入研究了它们在组件之间传递和接收消息的实现机制。通过一个实例的演示，我们展示了 $emit 和 $on 方法如何在实际应用中被使用。
希望通过这篇文章，您可以更好地理解 Vue.js 组件中的消息传递机制，并且掌握 $emit 和 $on 方法的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffc2e795b1f8cacde0e360