Vue.js - Comment appeler une méthode depuis un autre composant

Question

J'utilise Vue.Js v2. Je veux appeler composant1-> c1method dans composant2-> c2method pour recharger les données après la soumission.

Vue.component('component1', {
  methods: {
    c1method: function(){
     alert('this is c1method')
    },
  }
})
Vue.component('component2', {
  methods: {
    c2method: function(){
     component('component1').c1method()//like this
    },
  }
})

Answer 1

Les docs adressent cette situation

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Si vos composants ont le même parent, vous pouvez émettre un événement écouté par le parent. Ensuite, avec le jeu de propriétés ref, vous pouvez appeler le c1method du parent.

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

Answer 2

Pour la relation non parent-enfant, alors c'est la même chose que celle-ci. Appelez une méthode, apparemment toute méthode d'un composant à partir de tout autre composant. Ajoutez simplement un $on fonction à la $root instance et appelez tout autre composant accédant à la $root et en appelant $emit une fonction.

Sur le premier composant

 .... 
 mounted () {
 this. $ root. $ on ('composant1', () => {
 // votre code va ici 
 this.c1method () 
} 
} 

et dans le second composant appeler le $emit fonction dans $root

 ... 
 c2method: function () {
 this. $ root. $ emit ('composant1') // comme ceci 
}, 

Il agit plus comme une prise de courant. Référence ici

https://stackoverflow.com/a/50343039/6090215

Answer 3

Essayez ceci.

<template>
 ...
 <component1 ref='componentOne'>
...
</template>
<script>
  Vue.component('component2', {
    methods: {
     c2method: function(){
       this.$refs.componentOne.c1method();
     }
   }
  });
</script>