在 Vue.js 组件中，emit 和 dispatch 是两种非常常用的方式来实现组件之间的数据传递。emit 和 dispatch 的实现原理都是使用了 Vue.js event bus 的机制。本篇文章将详细介绍 emit 和 dispatch 的用法，并通过示例代码来说明其实现的过程和注意要点。
emit 的使用
emit 是 Vue.js 中一种自定义事件的实现方式。在组件内可以通过 $emit 方法来触发一个自定义事件并传递参数。这个事件可以被当前组件或者祖先组件（只要是监听了该事件）所监听，并且可以接收到 $emit 方法传递的参数。下面是一个示例代码：
-- -------------------- ---- -------
---- ---- --- ---
----------
------- ------------------------- ------- -----------
-----------
--------
------ ------- -
------ -
------ -
-------- ----------
--
--
-------- -
----------- -
-------------------------- -------------
--
--
--
---------在上面的示例中，我们定义了一个 message 变量和一个 emitEvent 方法。当点击按钮时，emitEvent 方法会触发名为 "custom-event" 的自定义事件，并传递 "这是一个自定义事件" 这个字符串作为参数。接下来，我们需要在父组件中监听这个事件，以便接收到传递的参数。
-- -------------------- ---- -------
---- ---- --- ---
----------
-----
---------------- ----------------------------------------------------
----- ------------- ------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
-------------- ---
--
--
-------- -
------------------ -
------------------ - ----
--
--
--
---------在示例代码 1.2 中，我们将子组件 ChildComponent 引入到了父组件中，并且通过 v-on 指令来监听了自定义事件。当子组件触发自定义事件时，父组件中的 onCustomEvent 回调函数将会被调用，并接收到传递的参数 msg。在示例代码 1.2 中，我们将自定义事件传递过来的参数 msg 赋值给了 customMessage 变量，并在模板中进行了渲染。
这个示例代码展示了 emit 的最基础的用法，我们可以将其扩展一下来实现更加复杂的场景。如果需要在一个组件实例中同时监听多个自定义事件，我们可以使用 $on 方法来添加多个回调函数。
-- -------------------- ---- -------
---- ---- --- ---
----------
-----
------- --------------------------------------
------- --------------------------------------
----- -------- -- -- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
--
--
-------- -
------------ -
--------------------------- --------------
--
------------ -
--------------------------- --------------
--
--
--------- -
------------------------- ----- -- -
------------- - ----
---
------------------------- ----- -- -
------------- - ----
---
--
--
---------在示例代码 1.3 中，我们定义了两个方法 emitEvent1 和 emitEvent2 分别来触发名为 "custom-event1" 和 "custom-event2" 的自定义事件，并传递不同的参数。接着，我们在 mounted 钩子函数中通过 $on 方法来分别添加了 custom-event1 和 custom-event2 的回调函数，来监听传递过来的参数，最终将其赋值给了 message1 和 message2 变量。
dispatch 的使用
dispatch 和 emit 的区别在于 dispatch 可以将事件向下传递到子组件中。当一个组件需要向它的子组件触发一个自定义事件时，我们可以使用 dispatch 方法。dispatch 也是使用 event bus 机制来实现。
假设我们有一个父组件和一个子组件，父组件中有一个按钮，当点击该按钮时，子组件会触发一个自定义事件，并将传递的参数在子组件中进行处理。下面是示例代码：
-- -------------------- ---- -------
---- --- ---
----------
-----
------- -------------------------------------------
------- -------------------------------------------
--------------- ----------------------------------- -----------------------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
---------------
--
-------- -
-------------- -
---------------------------------------- --------------
--
-------------- -
---------------------------------------- --------------
--
------------------- -
-----------------
--
------------------- -
-----------------
--
--
--
---------
---- --- ---
----------
-----
----- -------- -- -- -------- ------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
--
--
-------- -
------------------- -
------------- - ----
--
------------------- -
------------- - ----
--
--
--
---------在上面的示例中，我们定义了一个父组件，和一个子组件。父组件和子组件之间的通信是通过 $emit 和 $on 来实现的。父组件中的按钮分别触发自定义事件 custom-event1 和 custom-event2，这两个事件都是通过 $children 属性来获取子组件实例，然后使用 $emit 方法来将事件向下传递。子组件中，我们分别定义了处理 custom-event1 和 custom-event2 自定义事件的回调函数 onCustomEvent1 和 onCustomEvent2，并将传递过来的消息赋值给了 message1 和 message2 变量。
总结
本文介绍了 Vue.js 中 emit 和 dispatch 的用法，通过示例代码说明了 emit 和 dispatch 的机制和注意要点，并讲解了如何在复杂场景下来使用 emit 和 dispatch。emit 和 dispatch 都是非常常用的组件通信方式，熟练掌握这两种方式可以帮助你更好的编写 Vue.js 组件，并提高代码的复用性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe818995b1f8cacdd44a22