在 Vue.js 中，组件之间的通信是很重要的一部分。虽然父组件和子组件之间的通信很容易实现，但是在非父子组件之间，通信却比较困难。这时候就可以使用 Vue.js 提供的 $emit 和 $on 方法实现非父子组件之间的通信。
$emit
$emit 是 Vue.js 提供的一个方法，可以用于在组件之间发射事件。通过 $emit 发射事件，其他组件就可以监听到这个事件并进行相应处理。$emit 方法接收两个参数，第一个参数表示事件名，第二个参数表示传递的数据。
--------------------- ------
$on
$on 是 Vue.js 提供的另一个方法，可以用于监听组件发射的事件。当组件发射指定的事件时，$on 方法就会触发回调函数。$on 方法接收两个参数，第一个参数表示事件名，第二个参数表示回调函数。
------------------- -------------- - -- -------- ---
示例代码
现在来看一个示例代码，下面的示例代码中包含了两个非父子组件：A 和 B。A 组件中包含了一个按钮，点击按钮会发射一个事件，并且会传递一个数据。B 组件中监听了这个事件，并且会在控制台输出接收到的数据。
在 A 组件中使用 $emit 发射事件：
-------- -
------------- -
--------------------- ------- ----------
-
-在 B 组件中使用 $on 监听事件：
--------- -
------------------- -------------- -
------------------
---
-当点击 A 组件中的按钮时，B 组件的控制台会输出 "Hello, Vue.js!"。
总结
通过以上的示例代码，我们可以看到，$emit 和 $on 方法可以很方便地实现非父子组件之间的通信。在实际应用中，非父子组件之间的通信是很常见的情况，学会使用 $emit 和 $on 方法对于提高 Vue.js 应用的可维护性和可拓展性是非常有帮助的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654e33737d4982a6eb77623b