Bir Vue.js örneğinden diğerine veri çıkışı

Question

Çok fazla sayfamı olan oldukça büyük bir sayfam var. Bu yüzden sayfanın 2 bölümü için 2 Vue örneğim var. Verileri bir Vue örneğinden diğerine nasıl bağlarım?

Bu örnek, yapmaya çalıştığım şeyi göstermelidir. Hala en iyi çözüm arıyorum

<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

Şimdilik, bunun sizin sorduğunuz soru olmadığını biliyorum, ancak neden iki Vue örneğine ihtiyacınız olduğunu bilmiyorum. Neden sadece Vue'yu body'a bağlamıyorsunuz ve her iki Vue örneğini de bileşen olarak ele almıyoruz. Yapmaya çalıştığınız şeyi yapmak zor olabilir, çünkü amaçlanmadı. Belki de bilmiyordum. Vue'yi vücuda yerleştirdim ve bir performans isabet görmedim. İşte bir 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.' } 
}); 

size kodunu ayırmak için daha iyi bir yol arıyorsanız, bu Vue with Browserify example kontrol etmek isteyebilirsiniz. Oldukça bilgilendirici olan Vue ile ilgili

Laracasts has a free series.

Answer 2

(şekilde çalışmıyor). Aşağıdaki biraz hacky hissediyor ama işe yarıyor.

Bir ifadenin değişikliğini dinlemek ve bir işlevi tetiklemek için watch option'u kullanabilirsiniz. Bu fonksiyonda, başka bir Vue örneğinin istenen verilerini güncelleyebilirsiniz. size örnekte bu yapardınız: Sen this jsbin iş başında görebilirsiniz

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

.

Ayrıca, bunu yapmanız gerekip gerekmediğini merak ediyorum. Eğer bu gerçek bir durum olsaydı, bu hacky çözümden kaçınmak için daha iyi yollar olabilirdi.