2016-07-05 19 views
5

Ich bin damit beschäftigt für eine ganze Weile und habe keine Lösung gefunden. Das Problem ist, ich möchte, dass mein Modul mit Require JS und Vue/Vuex mit der Außenwelt kommuniziert.Zugriff Vue-Methode oder Ereignis von außerhalb der Vue App

Ich will nicht dieses

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

oder jquery

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

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

Das ist meine Gewohnheit verwenden Element ist

<div id="app"> 

    <customer-select></customer-select> 

</div> 

und meine main.js. Ich verwende requirejs meine AMD Module

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

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

     }); 
    } 

}; 

}); 

Gibt es eine Möglichkeit lade die App/Komponente kommuniziert mit der Außenwelt über ein Ereignis oder einen Hinweis zu machen, die Ich gehe rein?

Spezifisch. Ich möchte eine Auswahl in meiner Vue App machen und eine andere App auf der gleichen Seite wissen lassen es sich um eine der ausgewählten Daten erhalten sie weitere

+0

Vielleicht ist das ein wenig spät, aber wie wäre es mit etwas Speicher als Vermittler? etwas wie sessionStorage oder localStorage? Das Problem ist, dass Sie den lokalen Speicher überprüfen müssen, um zu sehen, ob es irgendwelche Daten gibt, also könnten Sie vielleicht eine globale Fensterfunktion erstellen und sie in Ihrer Komponente mit window.readData oder ähnlichem aufrufen. –

Antwort

1

Sie können versuchen, verarbeiten, um die Root-Vue Knoten als globale Variable zu speichern unter Verwendung window.name

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

Dann in anderen Teilen der Anwendung können Sie

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

ich tat diesen Knoten mit root nur würde vorschlagen, haben, wie es Ihren globalen Namensraum sonst verschmutzen würde.