Vue3组件通过Emitter传值并路由跳转后接收失败求助

问题原因 #

你当前的核心问题是事件触发时机早于目标组件挂载：执行$router.push后，/test路由下的子组件还没完成创建和挂载流程，但你在跳转前就触发了Coordinates事件，此时子组件的mounted钩子还未执行，自然监听不到事件。

可行解决办法 #

1. 路由参数传递数据（推荐，简单直接）

把坐标数据通过路由query或params携带过去：

// 跳转组件的submit方法
submit() {
  const coords = [116.397, 39.908] // 你的坐标数据
  this.$router.push({
    path: '/test',
    query: { coordinates: JSON.stringify(coords) }
  })
}

目标子组件在mounted中读取参数：

// 目标子组件的mounted钩子
mounted() {
  const coordsStr = this.$route.query.coordinates
  if (coordsStr) {
    const coords = JSON.parse(coordsStr)
    alert(JSON.stringify(coords))
  }
}

2. 状态管理库存值（适合复杂/多组件共享场景）

如果坐标数据需要在多个组件间共享，用Vuex或Pinia存储：

// 跳转组件的submit方法
submit() {
  const coords = [116.397, 39.908]
  // 假设用Pinia，调用store的存值方法
  useCoordsStore().setCoordinates(coords)
  this.$router.push('/test')
}

目标子组件读取存储的数据：

// 目标子组件的mounted钩子
import { useCoordsStore } from '@/stores/coords'

mounted() {
  const coords = useCoordsStore().coordinates
  if (coords) {
    alert(JSON.stringify(coords))
    // 可选：读取后清空存储，避免下次进入路由重复触发
    useCoordsStore().clearCoordinates()
  }
}

3. 延迟事件触发（不推荐，稳定性差）

如果一定要用事件总线，可以利用$router.push的异步特性，在路由跳转完成后再触发事件：

// 跳转组件的submit方法
submit() {
  const coords = [116.397, 39.908]
  this.$router.push('/test').then(() => {
    // 路由跳转完成后触发事件
    Emitter.emit('Coordinates', coords)
  })
}

这种方式依赖路由跳转的异步完成时机，若组件渲染延迟仍可能监听不到，仅作为备选方案。

注意事项 #

事件总线（Emitter）更适合同路由内、接收组件已挂载完成的场景，跨路由传递数据优先选择路由参数或状态管理，能避免生命周期不匹配导致的问题。

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