Ausgabedaten von einer Vue.js Instanz in eine andere

Question

Ich habe eine ziemlich große Seite mit vielen Sachen. Also habe ich 2 Vue-Instanzen für 2 Teile der Seite. Wie kann ich Daten von einer Vue-Instanz an eine andere binden?

Dieses Beispiel sollte zeigen, was ich versuche zu tun. (Es funktioniert nicht auf diese Weise)

<div class="app1">...</div> 
... 
<div class="app2">{{app1.$data.msg}}</div> 

---

var app1 = new Vue({ 
    el: '.app1', 
    data: {msg: "test"} 
}); 

var app2 = new Vue({ 
    el: '.app2' 
}); 

Answer 1

Im Voraus weiß ich, dass dies nicht die Frage ist, die Sie stellen, aber ich weiß nicht, warum Sie zwei Instanzen von Vue benötigen. Warum binden Sie Vue nicht einfach an die body und behandeln beide Vue-Instanzen als Komponenten. Es könnte schwierig sein, das zu tun, was Sie versuchen, weil es nicht beabsichtigt war. Vielleicht war es das, ich weiß es nicht. Ich habe Vue auf den Körper eingestellt und ich habe keinen Performance-Hit gesehen. Hier ist ein JSBin.

HTML

<div class="container"> 
    <div id="app1"> 
     <h1>{{ msg }}</h1> 
     <input type="text" v-model="msg" class="form-control"/> 

    </div> 
    <div id="app2"> 
     <h1>{{ msg }}</h1> 
     <input type="text" v-model="msg" class="form-control"/> 
    </div> 
</div> 

JavaScript

var VueComponent1 = Vue.extend({ 
    template: '#app1', 
    data: function(){ 
     return { 
      msg: "" 
     } 
    } 
}); 

var VueComponent2 = Vue.extend({ 
    template: '#app2', 
    data: function(){ 
     return { 
      msg: "" 
     } 
    } 
}); 

var app1 = Vue.component('app1', VueComponent1); 
var app2 = Vue.component('app2', VueComponent2); 
var app = new Vue({ 
    el: 'body', 
    data: { msg: 'Everybody loves Vue.' } 
}); 

Wenn Sie nach einem besseren Weg suchen Sie Code zu trennen, könnte man diese Vue with Browserify example prüfen wollen.

Laracasts has a free series auf Vue, die auch ziemlich informativ war.

Answer 2

ich immer noch für die beste Lösung suchen. Das Folgende fühlt sich ein bisschen hacky an, aber es funktioniert.

Sie können die watch option verwenden, um auf die Änderung eines Ausdrucks zu warten und eine Funktion auszulösen. In dieser Funktion können Sie die gewünschten Daten einer anderen Vue-Instanz aktualisieren. In Ihrem Beispiel würden wir dies:

var app1 = new Vue({ 
    el: '.app1', 
    data: {msg: 'test'}, 
    watch: { 
    'msg': function() { app2.msg = this.msg; } 
    } 
}); 

var app2 = new Vue({ 
    el: '.app2', 
    data: { msg: app1.$data.msg }, 
    watch: { 
    'msg': function() { app1.msg = this.msg; } 
    } 
}); 

du in this jsbin bei der Arbeit sehen.

Darüber hinaus frage ich mich, ob Sie das überhaupt tun müssen. Wenn dies eine reale Lebenssituation wäre, könnte es bessere Wege geben, um diese hacky Lösung zu vermeiden.