将数据从一个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 的免费系列,它也提供了相当丰富的信息.