4 votes

Écouter les événements émis par un composant Vue monté par programme

Je monte un composant Vue de manière programmatique dans un mixin, afin d'ajouter le HTML résultant à un popup de carte. Cela fonctionne bien mais je ne peux pas écouter les événements émis par le composant et je ne sais pas comment faire, si c'est possible.

Voici le code de travail :

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

Cela fonctionne, mais comment (et quand) puis-je écouter les événements émis par myComponent afin de mettre à jour le contenu de la fenêtre contextuelle par la suite ? Ces événements ne semblent pas être déclenchés après l'instanciation / le montage. Toute aide serait appréciée. Merci d'avance.

Editer : Pour être clair, le problème se pose ici parce que les événements émis par les myComponent ne semblent pas se déclencher après l'utilisation de la fonction $mount() sur l'instance Vue. Je pense que c'est lié à la compilation de l'instance mais je ne suis vraiment pas sûr que ce soit le bon chemin ou que ce soit même possible.

1voto

Jérôme Morlon Points 181

Je réponds ainsi à ma propre question car j'ai réussi à trouver la bonne méthode : les événements ont bien été déclenchés mais j'ai simplement détruit le composant trop tôt (je suis bête).

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X