将数据从一个 Vue.js 实例输出到另一个答案

【问题标题】：Output data from one Vue.js instance into another将数据从一个 Vue.js 实例输出到另一个
【发布时间】：2015-08-12 22:14:28
【问题描述】：

我有一个很大的页面，里面有很多东西。所以我有 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'
});

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

事先，我知道这不是您要问的问题，但我不知道您为什么需要两个 Vue 实例。为什么不将 Vue 绑定到 body 并将两个 Vue 实例都视为组件。做你想做的事情可能很困难，因为它不是故意的。也许是，我不知道。我已经在 body 上设置了 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 上也提供了相当丰富的信息。

【讨论】：

【解决方案2】：

我仍在寻找最佳解决方案。以下感觉有点hacky，但它有效。

您可以使用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 中看到这一点。

此外，我想知道您是否甚至需要这样做。如果这是现实生活中的情况，可能会有更好的方法来处理这个问题，避免这种骇人听闻的解决方案。

【讨论】：