Vue.js 是一款流行的前端框架，它提供了丰富的功能来简化前端开发。其中，$emit 方法和 $on 方法是 Vue.js 中非常重要的两个方法，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。
$emit 方法
$emit 方法是 Vue.js 中用于触发自定义事件的方法。它可以将数据从一个组件传递到另一个组件，从而实现组件之间的通信。$emit 方法的语法如下：
this.$emit(eventName, data)
其中，eventName 是自定义事件的名称，data 是要传递的数据。在组件中，我们可以通过以下方式触发自定义事件：
this.$emit('my-event', { message: 'Hello Vue.js' })上述代码将触发名为 my-event 的自定义事件，并传递一个包含 message 属性的对象作为数据。
$on 方法
$on 方法是 Vue.js 中用于监听自定义事件的方法。它可以在组件中监听另一个组件触发的自定义事件，并在事件触发时执行相应的逻辑。$on 方法的语法如下：
this.$on(eventName, callback)
其中，eventName 是要监听的自定义事件名称，callback 是事件触发时要执行的回调函数。在组件中，我们可以通过以下方式监听自定义事件：
mounted() {
this.$on('my-event', (data) => {
console.log(data.message)
})
}上述代码将在组件挂载后监听名为 my-event 的自定义事件，并在事件触发时输出传递的 message 属性。
使用场景
$emit 方法和 $on 方法在 Vue.js 中非常常用，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。下面是一些常见的使用场景：
父子组件通信
在 Vue.js 中，父子组件之间的通信可以使用 props 和 $emit 方法来实现。父组件可以通过 props 将数据传递给子组件，子组件可以通过 $emit 方法将数据传递回父组件。下面是一个示例：
-- -------------------- ---- -------
----------
-----
---------------- ------------------ ------------------------------------------
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------- ------ -------
-
--
-------- -
----------------- -
-------------------------
-
-
-
---------在上述示例中，父组件通过 props 将 message 数据传递给子组件，子组件通过 $emit 方法将数据传递回父组件。
兄弟组件通信
在 Vue.js 中，兄弟组件之间的通信可以使用一个共同的父组件和 $emit 方法来实现。兄弟组件可以通过共同的父组件触发自定义事件来实现通信。下面是一个示例：
-- -------------------- ---- -------
----------
-----
------------------ --------------------------------------------
---------------------------------------
------
-----------
--------
------ --------------- ---- -----------------------
------ --------------- ---- -----------------------
------ ------- -
----------- -
----------------
---------------
--
-------- -
----------------- -
-------------------------
---------------------- -----
-
-
-
---------在上述示例中，父组件通过 $emit 方法触发名为 my-event 的自定义事件，并将数据传递给兄弟组件。
跨级组件通信
在 Vue.js 中，跨级组件之间的通信可以使用一个共同的祖先组件和 $emit 方法来实现。子组件可以通过 $emit 方法将数据传递给共同的祖先组件，其他子组件可以通过 $on 方法监听自定义事件来获取数据。下面是一个示例：
-- -------------------- ---- -------
----------
-----
----------------- ------------------------
-----------------------------------
-------------------
------
-----------
--------
------ --------------- ---- -----------------------
------ -------------- ---- ----------------------
------ ------- -
----------- -
----------------
--------------
--
-------- -
----------------- -
-------------------------
-
-
-
---------在上述示例中，子组件通过 $emit 方法触发名为 my-event 的自定义事件，并将数据传递给共同的祖先组件。其他子组件可以通过 $on 方法监听该自定义事件来获取数据。
总结
$emit 方法和 $on 方法是 Vue.js 中非常重要的两个方法，它们可以帮助我们实现组件之间的通信，提高应用程序的复用性和可维护性。在实际开发中，我们可以根据具体的需求来选择合适的方法来实现组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e955ceb4cecbf2d475e0c