Vue.js - Comment appeler la méthode d'un autre composant

Je suis en utilisant Vue.Js v2. Je veux l'appeler component1->c1method dans component2->c2method pour récupérer 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
    },
  }
})
InformationsquelleAutor Miri | 2017-03-24
  1. 9

    Les docs de remédier à 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 que le parent écoute. Puis avec l' ref ensemble de propriétés, vous pouvez appeler la c1method de la mère.

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

    InformationsquelleAutor Eric Guan
  2. 22

    Pour les non-relation parent-enfant, alors c'est le même que celui. Appel d'une méthode, apparemment n'importe quelle méthode d'un composant à partir de n'importe quel autre composant. Il suffit d'ajouter une $on fonction de la $root instance et d'appel se former tout autre composant accéder à la $root et de l'appel de $emit fonction.

    Sur la Première composante

     .... 
monté() { 
c'.$root.$sur('composant1', () => { 
//votre code ici 
c'.c1method() 
} 
}

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

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

    Il agit plus comme un support. Référence ici

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

    • idk pourquoi cela fonctionne, mais ça fonctionne!
    • Essentiellement ce qui se passe est que vous pouvez ajouter des événements à la vue de l'instance à l'aide de $on de la fonction et de nommer l'événement et quelle fonction il déclenche, et vous pouvez déclencher l'événement à l'aide de $emit la fonction et de l'appelant nom de l'événement. ce que j'ai fait était de créer un événement de bus sur l'instance racine de Vue à l'aide de $root et maintenant je peut déclencher l'événement à partir de n'importe quel enfant de l'instance. En savoir plus sur ce ici => vuejs.org/v2/api/#Instance-Methods-Events
    InformationsquelleAutor Mir Ayman Ali
  3. 3

    Essayer.

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