Metodo o evento Access Vue dall'esterno dell'app Vue

Question

Sono stato occupato con questo per un po 'di tempo e non ho trovato una soluzione. Il problema è che voglio che il mio modulo sia compilato con Require JS e Vue/Vuex per comunicare con il mondo esterno.

Non voglio utilizzare questo

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

o jquery

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

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

Questo è il mio personalizzato Elemento

<div id="app"> 

    <customer-select></customer-select> 

</div> 

e le mie main.js. Sto usando requirejs per caricare i miei moduli AMD

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

miei 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 
      } 

     }); 
    } 

}; 

}); 

C'è un modo per rendere l'applicazione/componente di comunicare con il mondo esterno attraverso un evento o un riferimento che Passo?

In particolare. Voglio fare una selezione nel mio Vue app e lasciare che un altro App sulla stessa pagina sapere su di esso un ricevere i dati selezionati per elaborare ulteriormente

Answer 1

Si può provare a memorizzare il nodo principale Vue come una variabile globale utilizzando window.name

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

poi in altre parti della vostra applicazione è possibile avere

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

Vorrei suggerire solo facendo questo con il vostro nodo radice come sarebbe inquinare lo spazio dei nomi globale altrimenti.