Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

2.5K
Visualizações
Vue.js - How to call method from another component

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
    },
  }
})
over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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

over 4 years ago · Santiago Trujillo Relatório

0

// 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();
        }
    }
});
over 4 years ago · Santiago Trujillo Relatório

0

No need for hacky solutions.
In vuejs we can create events that can be listened globally.
With this feature, whenever we want to call our beloved function, we just emit this event.
Now, we just listen to this event all the time from the component. whenever this global event happens we can execute our method we want to call.

It's pretty simple:

  1. you go to main.js, before creating the vue instance, write this:
export const eventBus = new Vue(); // added line


new Vue({
    ...
    ...
    ...
    render: h => h(App)
}).$mount('#app');


  1. Anywhere we want to fire the target function, we dont fire it, we just emit this event:
eventBus.$emit('fireMethod');
  1. Now in our component that has the target function, we always listen to this event:
created() {
    eventBus.$on('fireMethod', () => {
            this.myBelovedMethod();
    })
}

Dont forget to import eventBus in top.

import {eventBus} from "path/to/main.js";

thats it, few lines of code, no hacky, all vuejs power.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda