Vue3 Option API下如何接收toggle-1.vue触发的自定义事件

先指出你当前代码的问题：

• 你在toggle-2里给<ToggleButtonClearDigitized>绑定了事件，但如果这个组件不是toggle-1，肯定接收不到toggle-1触发的事件。
• 方法名拼写错误：onClsDigitizePolygonInteractionInstanceInitt多了一个末尾的t，需要和监听的事件处理函数名一致。

以下分两种场景给出具体解决方法：

场景1：toggle-1是toggle-2的子组件 #

如果toggle-2是toggle-1的父组件，直接在toggle-2中引入toggle-1并绑定事件即可：

toggle-2.vue 修改后代码 #

<template>
  <!-- 直接引用toggle-1组件，绑定目标事件 -->
  <Toggle1 @onClsDigitizePolygonInteractionInstanceInit="handlePolygonInstanceInit" />
</template>

<script>
import Toggle1 from './toggle-1.vue'

export default {
  components: {
    Toggle1
  },
  methods: {
    // 方法名与绑定的事件处理函数一致，注意拼写
    handlePolygonInstanceInit(data) {
      console.log('接收到的交互实例：', data.clsDigitizePolygonInteractions)
    }
  }
}
</script>

场景2：toggle-1和toggle-2是非父子/兄弟关系（跨组件通信） #

如果两个组件没有直接父子关系，推荐用mitt事件总线实现跨组件通信，步骤如下：

步骤1：安装mitt #

npm install mitt

步骤2：创建事件总线实例 #

在项目中新建eventBus.js文件：

import mitt from 'mitt'
const emitter = mitt()
export default emitter

步骤3：toggle-1.vue 中触发事件 #

用事件总线替代原生$emit触发事件：

import emitter from './eventBus.js'

export default {
  // 保留原emits定义不影响
  emits: {
    'update:vModelToggleDigitize': null,
    onClsDigitizePolygonInteractionInstanceInit: ({ clsDigitizePolygonInteractions }) => {
      return !!clsDigitizePolygonInteractions
    },
  },
  // ...其他代码
  someMethod() {
    // 通过事件总线触发事件
    emitter.emit('onClsDigitizePolygonInteractionInstanceInit', { clsDigitizePolygonInteractions })
  }
}

步骤4：toggle-2.vue 中监听事件 #

在组件生命周期中监听事件，记得销毁组件时移除监听，避免内存泄漏：

import emitter from './eventBus.js'

export default {
  mounted() {
    // 监听目标事件
    this.polygonInstanceListener = emitter.on('onClsDigitizePolygonInteractionInstanceInit', (data) => {
      console.log('接收到的交互实例：', data.clsDigitizePolygonInteractions)
    })
  },
  beforeUnmount() {
    // 移除事件监听
    emitter.off('onClsDigitizePolygonInteractionInstanceInit', this.polygonInstanceListener)
  }
}

额外注意事项 #

• 事件名必须完全一致，Vue自定义事件区分大小写
• 确保触发事件时传递的clsDigitizePolygonInteractions是有效值，符合你在emits中定义的校验规则
• 如果需要长期共享该实例数据，也可以用Pinia状态管理替代事件总线，直接将实例存入状态，toggle-2读取状态即可

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