Vue2中兄弟组件$on异常执行/不响应$emit的原因咨询

问题1：回调函数在created阶段自动执行 #

• 原因：你直接传入console.log("Something")时，这不是传递函数引用，而是立即执行了console.log调用，并把调用结果（undefined）传给了$on。所以在created钩子执行$on的时候，这个console.log就直接触发了，和后续的事件触发无关。
• 正确写法应该传递函数引用，比如：

  // 箭头函数包裹
  this.$on('clickedEvent', () => console.log("Something"))
  

  或者单独定义函数后传递：

  methods: {
    logSomething() {
      console.log("Something")
    }
  },
  created() {
    this.$on('clickedEvent', this.logSomething)
  }
  

问题2：绑定自定义方法后，$emit触发无响应 #

• 核心原因：Vue的$emit和$on是基于当前组件实例的事件系统。EmitComponent调用this.$emit('clickedEvent')时，是在它自己的组件实例上触发事件；而ListenerComponent用this.$on('clickedEvent')是在它自己的实例上监听事件。两个兄弟组件是完全独立的实例，自然监听不到对方触发的事件。
• 你用EventBus能解决问题，本质是因为EventBus是一个全局共享的Vue实例，所有组件都在这个共享实例上进行$emit和$on操作，事件的触发和监听指向同一个实例，所以能实现跨组件通信。

额外补充：Vue2中兄弟组件通信除了EventBus，还可以通过父组件作为中间层中转事件；Vue3中则更推荐用Pinia或provide/inject来处理这类跨组件通信场景，$on/$emit本身就仅适用于组件自身或父子组件间的事件传递。

内容的提问来源于stack exchange，提问作者pRadavelli