Vue.js 提供了一个事件系统，允许组件之间通过自定义事件进行通信
这个系统主要包括两个方法：
$emit：用于触发事件。$on：用于监听事件。
main.js上面
el: '#app',
data: {
eventHandle: {
// 初始化为空对象
}
},
使用emit触发事件
this.$root.eventHandle.$emit('custom-event', { message: 'Hello from another component!' });
使用on来监听事件
created() {
// 在 created 生命周期钩子中监听自定义事件
this.$root.eventHandle.$on('custom-event', this.handleCustomEvent);
},
methods: {
handleCustomEvent(payload) {
console.log('Custom event received:', payload);
}
}
});
也可以简写上面的,直接把接收的函数写在created里面
this.$root.eventHandle.$on('custom-event', (payload)=>{
console.log(payload.message)//打印的内容就是Hello from another component!
});
注意事项
- 内存泄漏：在使用
$on监听事件时，需要注意在组件销毁时移除监听器，以避免内存泄漏。可以使用$off方法来移除监听器。
beforeDestroy() {
this.$root.eventHandle.$off('custom-event');
}
- 事件命名：事件名称应该遵循一定的命名规范，通常使用短横线分隔的小写字母（kebab-case），以避免与原生事件冲突。
总结
this.$root.eventHandle.$on 是 Vue.js 中用于在根元素上监听自定义事件的方法。通过合理使用这个方法，可以实现组件之间的通信和事件管理。在使用时，需要注意内存泄漏和事件命名规范。