將數據從一個Vue.js實例輸出到另一個實例

Question

我有一個很大的頁面，有很多東西在繼續。 所以我有兩個頁面的2個Vue實例。 如何將數據從一個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.' }
});

如果您正在尋找一種更好的方法來分隔您的代碼，您可能希望使用Browserify示例查看此Vue 。

Laracasts有一個關於Vue 的免費系列 ，它也提供了相當豐富的信息。

Answer 2

我仍然在尋找最好的解決方案。 以下感覺有點hacky但它​​的工作原理。

您可以使用watch選項來偵聽表達式的更改並觸發函數。 在此功能中，您可以更新另一個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; }
  }
});

你可以在這個jsbin中看到這個。

而且，我想知道你是否甚至需要這樣做。 如果這是一個真實的情況，可以有更好的方法來處理這個避免這種hacky解決方案。