Dostęp do metody lub zdarzenia Vue spoza aplikacji Vue

Question

Byłem zajęty tym od dłuższego czasu i nie znalazłem rozwiązania. Problem polega na tym, że chcę, aby mój moduł został zbudowany z Require JS i Vue/Vuex, aby komunikować się ze światem zewnętrznym.

Nie chcę, aby skorzystać z tej

require(["myModule"],function(vm){ 
vm.$children[0].myMethod() 
}); 

lub jQuery

// inside app 
$(document).trigger("myEvent",payload); 

// outside app 
$(document).on("myEvent",myHandler); 

To jest mój zwyczaj Element

<div id="app"> 

    <customer-select></customer-select> 

</div> 

i moi main.js. Używam requirejs załadować moje moduły AMD

define(["./app2/app"], function (CustomerSelectApp) { 
    CustomerSelectApp.init("#app"); 
}); 

moje app.js

define([ "vue", "jquery", "webjars/nm-customer-select/nm-customer-select", 
    "css!bootstrap-css" ], 

function(Vue, $, customerSelect) { 

return { 
    init : function(targetElement) { 
     return new Vue({ 
      el : targetElement, 


      components : { 
       customerSelect : customerSelect 
      } 

     }); 
    } 

}; 

}); 

Czy jest jakiś sposób, aby aplikacja/Component komunikować się ze światem zewnętrznym poprzez zdarzenie lub odniesienie to Przejdę?

W szczególności. Chcę, aby dokonać wyboru w moim Vue aplikacji i niech innej aplikacji na tej samej stronie wiedzieć, że jest to odbierać wybrane dane przetwarzać go dalej

Answer 1

Można spróbować przechowywania korzenia Vue jako zmienną globalną używając window.name

define(["./app2/app"], function (CustomerSelectApp) { 
    window.VueRoot = CustomerSelectApp.init("#app"); 
}); 

Następnie w innych częściach aplikacji można mieć

VueRoot.method(); 
VueRoot.data = value; 
VueRoot.$emit('event', data); 

Sugerowałbym tylko robi to z korzenia gdyż zanieczyszczają swoją globalną przestrzeń nazw inaczej.