Question

我正在以编程方式在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实例上使用myComponent方法后，$mount()发出的事件似乎没有被触发。我认为这与编译实例有关，但我真的不确定那是正确的路径还是什至可行。

Answer 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()
})

侦听以编程方式安装的Vue组件发出的事件

1 个答案: