前言
Vue.js 是一种流行的前端框架，它的事件机制是其核心功能之一。在 Vue 中，事件是一种信号，可用于在组件之间传递数据。事件机制是基于发布订阅模式实现的。在此文章中，将详细介绍 Vue 中的事件机制。从如何创建事件和如何触发事件开始，到如何订阅和反应事件。并提供一些示例代码帮助读者更好的理解。
发布事件（emit）
发布事件是指将一条消息发送给所有对该事件感兴趣的订阅者。首先，需要在 Vue 组件中创建一个事件。可以使用 $emit 方法来创建。
----------------------- -----------
以上代码向所有订阅了 "eventName" 事件的组件发送了一条消息。 "eventData" 参数是可选的。如果在事件中传递数据，可以在事件发生时捕获它。
订阅事件（on）
订阅事件是指一组操作，为该事件的发生做出反应。当事件发生时，必须订阅该事件才能捕获传递的数据。可以使用 $on 方法订阅事件。
--------------------- ---------
以上代码订阅了 "eventName" 事件，并将一个处理程序(handler)绑定到该事件。当 "eventName" 事件发生时，处理程序将被调用。可以同时订阅多个事件，并将它们绑定到同一个处理程序。
销毁事件订阅（off）
如果不需要订阅事件了，可以使用 $off 方法将订阅删除。
---------------------- ---------
以上代码从 "eventName" 事件中删除了一个处理程序。如果未指定处理程序，则会删除所有处理程序。
示例代码
下面的示例代码说明了如何使用 Vue 事件机制在两个组件之间通信。这里使用了父组件和子组件来说明事件的创建、发布和订阅。
Parnet.vue
----------
---- ------------
------------
------- ----------------------------------
------ ------------------------------ --
------
-----------
--------
------ ----- ---- --------------
------ ------- -
----- ---------
----------- -
------
--
-------- -
------------- -
--------------------- --------------
--
-------------------- -
---------------------
--
--
--
---------Child.vue
----------
---- -----------
------------
------
-----------
--------
------ ------- -
----- --------
--------- -
--------------------------- ---------------------
--
--------------- -
---------------------------- ---------------------
--
-------- -
----------------------- -
----------------------------- ---------
--
--
--
---------在父组件中创建了 "message" 事件，并在点击按钮时向所有订阅它的子组件发送了一条消息。在子组件中订阅 "message" 事件，并将其绑定到 "receiveMessage" 方法。当子组件接收到事件并收到消息时会触发 "receivedMessage" 事件，并调用父组件中的 "showMessage" 方法，以在控制台中显示消息。
结论
Vue.js 提供了一个强大而高效的事件机制，用于在其他组件之间建立通信。您可以使用 $emit 方法来创建事件，使用 $on 方法来订阅事件，并使用 $off 方法来销毁事件订阅。通过这篇文章的学习，读者可以进一步理解并应用 Vue 中的事件机制。通过示例代码的演示，读者可以更加具体地体验事件机制与组件之间的互动方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f101a2e7021665efb6ac9