Vue.js - Aufruf einer Komponente Methode von Vue-Instanz

Question

Ich habe eine Vue-Instanz und eine globale Komponente erstellt. Wie kann ich die Methode der Komponente über meine Vue-Instanz aufrufen?

In meinem Vue Beispiel ich dies tat:

methods: { 
    handleTabClick: function(tab, event) { 
     if (tab.name == 'log') { 
      call loadLog function in log component 
     } 
    } 
} 

Dann meine Komponente wie folgt definiert ist:

Vue.component('jettLog', { 
    props: ['shop'], 

    data() { 
     return { 
      log: [], 
      logLoading : true 
     } 
    }, 

    methods: { 
     loadLog: function() { 
      console.log("Load"); 
     }, 
    }, 
}); 

Wie kann ich jettLog die Funktion loadLog von handleTabClick() nennen?

Ich sehe verschiedene Erklärungen und jetzt frage ich mich, was ist der beste Weg, es zu tun?

Danke!

Answer 1

ein globales Ereignis Bus Registrieren whixh eine leere bue Instanz ist wie folgt:

Var EventBus = new Vue(); 

in Ihrem vue Beispiel emittiert ein Ereignis mit EventVus.$emit()

methods: { 
    handleTabClick: function(tab, event) { 
     if (tab.name == 'log') { 
      EventBus.$emit('log-event') 
     } 
    } 
} 

$emit() zwei Argumente: 1: Veranstaltung Name 2. Ereignisdaten (optional)

Im erstellten Hook von jettLog Komponente ein Ereignis aus Listener auf dem EventBus und Logik durchführen, wenn ein Ereignis paticular

Vue.component('jettLog', { 
    props: ['shop'], 

    data() { 
     return { 
      log: [], 
      logLoading : true 
     } 
    }, 
    created(){ 
     var self = this; 
     EventBus.$on('log-event', function(eventData){ 
      self.loadLog(); 
     }); 
    }, 
    methods: { 
     loadLog: function() { 
      console.log("Load"); 
     }, 
    }, 
}); 

Check this out for more info