J'ai une application qui a un composant Parent (app.js) et 2 composants enfants frères (Modal.vue et Cart.vue).

Je reçois une réponse d'un appel dans Modal.vue qui doit déclencher une fonction dans Cart.vue juste après. Quelles sont les meilleures options pour y parvenir? Je n'utilise actuellement pas Vuex, ce qui, je sais, faciliterait les choses.

0
burtonLowel 6 mai 2020 à 08:36

3 réponses

Pour cela, vous pouvez utiliser des événements personnalisés en utilisant le root Instance Vue de l'arborescence actuelle des composants.

Dans Modal.vue:

Lorsque vous recevez une réponse d'un appel, émettez simplement un événement personnalisé comme:

this.$root.$emit('onupdate', data);

Dans Cart.vue:

Écoutez simplement cet événement émis par la racine comme

var vm = new Vue({
  data: {},
  mounted() {
    this.$root.$on('onupdate', data => {
      // trigger a function within Cart.vue
      this.myFunction(data)
    });
  }
  methods: {
    myFunction: function(data) {
      console.log(data);
    }
  }
})
0
palaѕн 6 mai 2020 à 05:49

Vous pouvez créer un bus d'événements:

https://www.digitalocean.com/community/tutorials/vuejs-global-event-bus

0
Ifaruki 6 mai 2020 à 05:45

Vous pouvez utiliser refs comme ceci:

<parent>
 <modal @triggerFunc="triggerFunc"/>
 <cart ref="$cartRef"/>
</parent>

...
triggerFunc(){
   this.$refs.$cartRef.functionIwantToTrigger()
}
1
Michael 6 mai 2020 à 05:40