Vue.js - How to call method from another component

Question

I am using Vue.Js v2. I want to call component1->c1method in component2->c2method for reload data after submitting.

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

Answer 1

For non-parent-child relation, then this is the same as this one. Call one method, apparently any method of a component from any other component. Just add a $on function to the $root instance and call form any other component accessing the $root and calling $emit function.

On First component

     ....     mounted() {         this.$root.$on('component1', () => {             // your code goes here             this.c1method()         }     } 

and in the second component call the $emit function in $root

     ...     c2method: function(){      this.$root.$emit('component1') //like this     }, 

It acts more like a socket. Reference here

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

Answer 2

// Component A Vue.component('A', {     created() {         this.$root.$refs.A = this;     },     methods: {         foo: function() {             alert('this is A.foo');         }     } });  // Component B Vue.component('B', {     methods: {         bar: function() {             this.$root.$refs.A.foo();         }     } });