Vue.js 是一个流行的前端框架，它提供了很多方便的功能让开发者可以轻松地构建复杂的交互式应用。在 Vue.js 中，组件是一个重要的概念。组件可以让我们将应用拆分为更小的部分，从而更容易地管理和维护。
在 Vue.js 中，组件之间通常需要进行通信。事件是组件之间通信的一个重要机制。在本文中，我们将介绍 Vue.js 中在组件间传递事件的方式，并提供示例代码来帮助你更好地理解它们。
组件之间的通信
在 Vue.js 中，组件有两种通信方式：属性(prop)和事件(event)。属性是一种从父组件传递到子组件的单向数据流。子组件通过 props 选项来声明接收的属性，并通过 this.$props.xxx 来访问。事件是一种从子组件向父组件通信的方式。
在一个典型的 Vue.js 应用中，组件树是层级结构。每个组件都可以有自己的子组件，并且可以通过事件向它的父组件发送数据。组件的祖先组件也可以通过事件将数据传递给所有的子孙组件。这种基于事件的通信机制可以让我们构建更加灵活和可重用的组件。
组件事件的基本原理
在 Vue.js 中，每个组件都是一个独立的实体，并且都可以发出自己的事件。当一个组件需要向其父组件传递数据时，它可以通过 $emit() 方法来触发一个自定义事件。这个自定义事件可以在父组件中注册，并且在回调函数中处理数据。
下面是一个简单的实例，演示父组件和子组件之间通过事件进行通信的基本原理：
-- -------------------- ---- -------
-- ---
----------
-----
--------------------
------ ---------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- ------ -------
-
--
-------- -
-------------- -
------------ - ----
-
-
-
---------
-- ---
----------
------- ---------------------- ---- -- ---------------
-----------
--------
------ ------- -
-------- -
---------- -
-------------------- ------ --------
-
-
-
---------在这个例子中，父组件包含了一个 Message 属性，它的初始值是 "Hello Vue.js"。它还包含了一个名为 onNotify 的方法，它会被子组件触发。子组件包含了一个按钮，当按钮被点击时，子组件会触发一个名为 notify 的自定义事件，事件携带的数据是 "Hello Parent"。父组件在模板中绑定了子组件的 notify 事件，并将它绑定到回调函数 onNotify 上。当子组件触发 notify 事件时，onNotify 方法被调用，并将子组件传递的数据（"Hello Parent"）更新到 Message 属性上。这会导致父组件重新渲染，并将新的 Message 值渲染到模板中。
在组件间传递事件的几种方式
上面的例子演示了 Vue.js 中组件事件的基本原理。但是在实际开发中，可能会遇到更多的复杂情况。Vue.js 提供了多种方式来帮助你在组件之间传递数据和事件。下面，我们将介绍这些方式，并提供示例代码来帮助你更好地理解它们。
1. 使用$emit()来传递事件
在上面的例子中，我们已经演示了如何使用 $emit() 方法来触发一个自定义事件。这是最基本的传递事件的方式，它与任何组件库或第三方库无关。你可以将 $emit() 方法放置在父组件或子组件中，并在需要的时候进行调用。
下面的代码演示了如何在子组件中触发一个名为 notify 的自定义事件，并将事件携带的数据传递给父组件：
-- -------------------- ---- -------
-- ---
----------
------- ---------------------- ---- -- ---------------
-----------
--------
------ ------- -
-------- -
---------- -
-------------------- ------ --------
-
-
-
---------在父组件中，你可以使用 @notify 来监听自定义事件。当子组件中的 sendData 方法被调用时，父组件中的 onNotify 方法会被触发。下面的代码展示了如何在父组件中监听子组件的 notify 事件：
-- -------------------- ---- -------
-- ---
----------
-----
--------------------
------ ---------------------------
------
-----------
--------
------ ----- ---- -------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- ------ -------
-
--
-------- -
-------------- -
------------ - ----
-
-
-
---------2. 使用 event bus
Vue.js 中的事件总线（Event Bus）是一种高效的组件通信方式，它可以帮助你在任意组件之间传递事件。事件总线实际上是一个全局实例，它可以在任何组件中引用。
下面是一个演示如何使用事件总线在两个组件之间传递事件的例子：
-- -------------------- ---- -------
-- -----------
------ --- ---- -----
------ ----- -------- - --- -----
-- ------ ---------
------ - -------- - ---- ------------
------ ------- -
-------- -
---------- -
------------------------ ------ --------
-
-
-
-- -------- ---------
------ - -------- - ---- ------------
------ ------- -
--------- -
------------------------------------
--
----------- -
----------------------- --------------
--
-------- -
-------------- -
------------------
-
-
-在这个例子中，我们首先创建了一个名为 EventBus 的全局 Vue 实例。在 Sender 组件中，我们通过 EventBus.$emit() 触发了一个名为 notify 的自定义事件。在 Receiver 组件中，我们使用 EventBus.$on() 来监听这个事件，并在事件触发时调用 onNotify 方法。这个方法中的参数 data 就是事件携带的数据。
3. 使用 Vuex
Vuex 是一个专门用于 Vue.js 应用中状态管理的库。它提供了一种集中式存储机制来管理应用的全部状态，使得多个组件可以共享同一个状态。在 Vuex 中，数据被称为状态(state)。状态只能通过特定的方式来更新，该方式被称为提交(commit)。状态的变化会被同步到所有组件中。当一个组件对状态进行修改时，所有其他组件都会得到通知。
下面的代码演示了如何在两个组件中共享状态，并在一个组件中触发一个自定义事件来更新状态：
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
-------- ------ ------
--
---------- -
-------------------- -------- -
------------- - -------
-
-
--
------ ------- -----
-- ------ ---------
------ ------- -
-------- -
---------- -
----------------------------------- ------ --------
-
-
-
-- -------- ---------
------ ------- -
--------- -
--------- -
------ -------------------------
-
--
--------- -
-------------------------------- ------ -- -
-- -------------- --- ---------------- -
------------------------------
-
--
-
-在这个例子中，我们首先创建了一个包含 message 属性的 Vuex store。在 Sender 组件中，我们通过 this.$store.commit() 方法提交一个 mutation 来更新状态。在 Receiver 组件中，我们使用了 mixin 方式来访问 Vuex store，通过 computed 属性来监听 message 属性的变化，打印到控制台信息。
总结
在本文中，我们介绍了在 Vue.js 中组件间传递事件的方式，包括使用 $emit()、event bus 和 Vuex。通过这些不同的方式，我们可以灵活地构建更加可重用和模块化的组件。我们希望本文的示例代码可以帮助读者更好地了解 Vue.js 组件通信机制，并在实际应用中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451b30e675af4061b57b8a5