Dane wyjściowe z jednej instancji Vue.js do innej

Question

Mam dość dużą stronę z mnóstwem rzeczy. Mam 2 instancje Vue na 2 części strony. Jak mogę powiązać dane z jednej instancji Vue z drugą?

Ten przykład powinien pokazać, co próbuję zrobić. (To nie działa w ten sposób)

<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

Wcześniej wiem, że to nie jest pytanie, które zadajesz, ale nie wiem, dlaczego potrzebujesz dwóch instancji Vue. Dlaczego nie wystarczy związać Vue z body i traktować obie instancje Vue jako komponenty. Może być trudno zrobić to, co próbujesz zrobić, ponieważ nie było to zamierzone. Może to było, nie wiem. Ustawiłem Vue na ciele i nie widziałem uderzenia wydajności. Oto 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.' } 
}); 

Jeśli szukasz lepszego sposobu oddzielenia Ci kod, może chcesz sprawdzić to Vue with Browserify example.

Laracasts has a free series na Vue, który również był bardzo pouczający.

Answer 2

Nadal szukam najlepszego rozwiązania. Poniższe wydaje się nieco hacky, ale działa.

Możesz użyć watch option, aby odsłuchać zmianę wyrażenia i wywołać funkcję. W tej funkcji można zaktualizować żądane dane innej instancji Vue. W tym przykładzie zrobimy to:

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; } 
    } 
}); 

Możesz to zobaczyć w pracy pod numerem this jsbin.

Co więcej, zastanawiam się, czy trzeba to zrobić. Gdyby to była prawdziwa sytuacja, mogłyby istnieć lepsze sposoby na uniknięcie tego hackowatego rozwiązania.