vue组件通信：使用$on进行自定义事件监听
在Vue中，组件是独立的，每个组件有自己的生命周期和数据。然而，在实际的开发过程中，组件之间的通信是不可避免的。Vue提供了一种非常灵活和高效的组件通信方式：自定义事件监听。
Vue的自定义事件监听机制是基于发布-订阅模式实现的。通过使用Vue实例的$on方法可以在一个组件中监听一个自定义事件，并通过$emit方法在其他组件中触发该事件。下面我们将详细介绍如何使用$on进行自定义事件监听。
首先，我们来创建一个简单的父子组件示例，父组件是App.vue，子组件是Child.vue。
App.vue：
立即学习“前端免费学习笔记（深入）”；
App Component
Child.vue：
在父组件App.vue中，我们通过点击按钮触发一个自定义事件customEvent，并传递一个消息给子组件。
子组件Child.vue中，我们在mounted生命周期钩子函数中使用this.$parent.$on方法监听父组件中的自定义事件customEvent。并在beforeDestroy生命周期钩子函数中使用this.$parent.$off方法取消监听。在方法handleCustomEvent中，我们将父组件传递的消息赋值给子组件的message。
通过以上代码示例，我们实现了父子组件之间的通信。当点击父组件中的按钮时，子组件会接收到父组件传递的消息并将其显示出来。
除了父子组件之间的通信，我们还可以在任意两个组件之间建立通信。只需在其中一个组件中使用this.$on监听自定义事件，然后在另一个组件中使用this.$emit触发该事件即可。
综上所述，通过Vue的$on方法进行自定义事件监听，我们可以实现灵活、高效的组件通信。无论是父子组件之间的通信还是任意两个组件之间的通信，都可以轻松处理。希望本文对你在Vue开发中的组件通信问题有所帮助。
