Вывод данных из одного экземпляра Vue.js в другой

Question

У меня есть довольно большая страница с большим количеством материала. Поэтому у меня есть 2 экземпляра Vue для 2 частей страницы. Как я могу привязать данные из одного экземпляра Vue к другому?

Этот пример должен показать, что я пытаюсь сделать. (Это не работает таким образом)

<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

Заранее, я знаю, что это не вопрос, который вы задаете, но я не знаю, зачем вам два экземпляра Vue. Почему бы просто не связать Vue с body и рассматривать оба экземпляра Vue как компоненты. Возможно, вам будет трудно делать то, что вы пытаетесь сделать, потому что это не было предназначено. Возможно, это было, я не знаю. Я поставил Vue на тело, и я не видел удара производительности. Вот 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.' } 
}); 

Если вы ищете лучший способ, чтобы отделить вам код, вы можете проверить это Vue with Browserify example.

Laracasts has a free series на Vue, который был довольно информативным, а также.

Answer 2

Я до сих пор ищет лучшее решение. Следующее выглядит немного взломанным, но оно работает.

Вы можете использовать watch option, чтобы прослушать изменение выражения и вызвать функцию. В этой функции вы можете обновить желаемые данные другого экземпляра Vue. В вас примере мы бы сделать это:

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

Вы можете увидеть это на работе в this jsbin.

Кроме того, мне интересно, нужно ли вам это делать. Если бы это была реальная ситуация, могли бы быть лучшие способы справиться с этим, избегая этого хакерского решения.