Vue.js 提供了一个事件系统，允许组件之间通过自定义事件进行通信

这个系统主要包括两个方法：

1. $emit：用于触发事件。
2. $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!

});

 注意事项

1. 内存泄漏：在使用 $on 监听事件时，需要注意在组件销毁时移除监听器，以避免内存泄漏。可以使用 $off 方法来移除监听器。

beforeDestroy() {
  this.$root.eventHandle.$off('custom-event');
}

1. 事件命名：事件名称应该遵循一定的命名规范，通常使用短横线分隔的小写字母（kebab-case），以避免与原生事件冲突。

总结

this.$root.eventHandle.$on 是 Vue.js 中用于在根元素上监听自定义事件的方法。通过合理使用这个方法，可以实现组件之间的通信和事件管理。在使用时，需要注意内存泄漏和事件命名规范。

原文地址：https://blog.csdn.net/qq_33769914/article/details/143487578

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！