监听从以编程方式安装的 Vue 组件发出的事件答案

【问题标题】：Listening to events emitted from a programmatically mounted Vue component监听从以编程方式安装的 Vue 组件发出的事件
【发布时间】：2026-01-16 02:55:02
【问题描述】：

我正在以编程方式在 mixin 中安装一个 Vue 组件，以便将生成的 HTML 添加到地图弹出窗口中。这工作正常，但我无法收听组件发出的事件，而且我不知道如何做到这一点，如果可以做到的话。

这是工作代码：

import Vue from 'vue'
import myComponent from 'components/myComponent'

export default {
  methods: {
    makePopup(coordinates, data) {
      const popup = new Vue({
        ...myComponent,
        parent: this,
        propsData: data
      }).$mount()

      const content = popup.$el.outerHTML

      this.$map.showPopup(coordinates, content)

      popup.$destroy()
    }
  }
}

这是可行的，但我如何（以及何时）收听myComponent 发出的事件以便之后更新弹出内容？在我实例化/安装后，这些事件似乎没有被触发。任何帮助，将不胜感激。提前致谢。

编辑：需要明确的是，这里出现了问题，因为在 Vue 实例上使用 $mount() 方法后，myComponent 发出的事件似乎没有被触发。我认为这与编译实例有关，但我真的不确定这是正确的路径，或者是否可能。

【问题讨论】：

您可以使用global event bus 或vuex
@max 是的，这是我通常做的，但这里的组件是以编程方式安装的，这意味着据我所知，该组件中发出的事件不会被触发。所以这里的问题是如何确保他们被解雇以便在我的方法中听他们

标签： javascript vue.js vuejs2

【解决方案1】：

很好地回答了我自己的问题，因为我设法找到了正确的方法：事件确实被触发了，但我只是过早地破坏了组件（我很傻）

const popup = new Vue({
  ...myComponent,
  parent: this,
  propsData: data
}).$mount()

this.$map.showPopup(coordinates, popup.$el.outerHTML)

popup.$on('complete', () => {
  // update popup content code
  popup.$destroy()
})

【讨论】：