Vue.js - Vueインスタンスからコンポーネントのメソッドを呼び出す

Question

私はVueインスタンスとグローバルコンポーネントを作成しました。 Vueインスタンスからコンポーネントのメソッドを呼び出すにはどうすればよいですか？

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

その後、私のコンポーネントはこのように定義されています：これをしなかった私に私Vueのインスタンスで

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

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

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

どのように私はjettLogの機能handleTabClick()からloadLogを呼び出すことができますか？

私はさまざまな説明を見て、今私はそれを行うための最善の方法が不思議ですか？

ありがとうございます！

Answer 1

このような空のBUEインスタンスであるwhixhグローバルイベントバスを登録します。 1：イベント

あなたVUEインスタンスで

Var EventBus = new Vue(); 

がEventVus.$emit()

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

$emit()でイベントを放出は2つの引数を取ります名前 2.イベントデータ（オプション）

作成されたフックjettLog成分は、EventBusにイベントリスナーを設定し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