在vue中，组件是独立的，每个组件有自己的生命周期和数据。然而，在实际的开发过程中，组件之间的通信是不可避免的。vue提供了一种非常灵活和高效的组件通信方式：自定义事件监听。
vue的自定义事件监听机制是基于发布-订阅模式实现的。通过使用vue实例的$on方法可以在一个组件中监听一个自定义事件，并通过$emit方法在其他组件中触发该事件。下面我们将详细介绍如何使用$on进行自定义事件监听。
首先，我们来创建一个简单的父子组件示例，父组件是app.vue，子组件是child.vue。
app.vue：
<template> <div> <h2>app component</h2> <button @click="notifychild">通知子组件</button> <child></child> </div></template><script> import child from './child.vue'; export default { name: 'app', components: { child }, methods: { notifychild() { this.$emit('customevent', 'hello child component!'); } } }</script>
child.vue：
<template> <div> <h2>child component</h2> <p>{{ message }}</p> </div></template><script> export default { name: 'child', data() { return { message: '' } }, mounted() { this.$parent.$on('customevent', this.handlecustomevent); }, beforedestroy() { this.$parent.$off('customevent', this.handlecustomevent); }, methods: { handlecustomevent(message) { this.message = message; } } }</script>
在父组件app.vue中，我们通过点击按钮触发一个自定义事件customevent，并传递一个消息给子组件。
子组件child.vue中，我们在mounted生命周期钩子函数中使用this.$parent.$on方法监听父组件中的自定义事件customevent。并在beforedestroy生命周期钩子函数中使用this.$parent.$off方法取消监听。在方法handlecustomevent中，我们将父组件传递的消息赋值给子组件的message。
通过以上代码示例，我们实现了父子组件之间的通信。当点击父组件中的按钮时，子组件会接收到父组件传递的消息并将其显示出来。
除了父子组件之间的通信，我们还可以在任意两个组件之间建立通信。只需在其中一个组件中使用this.$on监听自定义事件，然后在另一个组件中使用this.$emit触发该事件即可。
综上所述，通过vue的$on方法进行自定义事件监听，我们可以实现灵活、高效的组件通信。无论是父子组件之间的通信还是任意两个组件之间的通信，都可以轻松处理。希望本文对你在vue开发中的组件通信问题有所帮助。
以上就是vue组件通信：使用$on进行自定义事件监听的详细内容。