软装设计师主要做什么_学校网站网页制作_服务网站排名咨询_网络营销个人总结

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

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 中用于在根元素上监听自定义事件的方法。通过合理使用这个方法，可以实现组件之间的通信和事件管理。在使用时，需要注意内存泄漏和事件命名规范。