Vue 同一组件多实例触发事件回调执行异常问题咨询

1 最高概率原因：未给同类型组件添加唯一key属性 #

Vue的虚拟DOM Diff算法对同类型组件默认采用就地复用策略，如果你两个<custom-component>未设置唯一标识，Vue会判定为同一个实例，仅保留第一个绑定的事件回调，因此所有触发都会走func1。

解决方法：给两个实例添加唯一key #

<template>
  <custom-component key="first-camera" @picture-taken="func1" />
  <custom-component key="second-camera" @picture-taken="func2" />
</template>

2 次概率原因：组件内部触发逻辑绑定了全局公共上下文 #

如果你的myMethod是通过全局事件、全局事件总线、第三方SDK全局回调触发的，仅第一个实例完成了事件绑定，后续实例的绑定逻辑没有执行，或是未在组件销毁时解绑事件，就会导致永远只有第一个实例的myMethod被触发。

排查与解决方法： #

• 先给每个组件实例添加唯一标识，确认触发事件的实例是否永远是第一个：

// CustomComponent 代码
export default {
  created() {
    // 生成随机实例ID
    this.instanceId = Math.random().toString(36).slice(2, 8)
  },
  methods: {
    myMethod () {
      console.log('当前触发事件的实例ID：', this.instanceId)
      this.$emit('picture-taken')
    }
  }
}

• 如果打印的ID永远是同一个，需要调整事件绑定逻辑，每个实例单独绑定事件，销毁时同步解绑：

// CustomComponent 生命周期示例
export default {
  created() {
    // 每个实例单独绑定全局事件
    window.addEventListener('camera-capture-trigger', this.myMethod)
  },
  beforeUnmount() {
    // 组件销毁时解绑当前实例的事件，避免内存泄漏和冲突
    window.removeEventListener('camera-capture-trigger', this.myMethod)
  }
}

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