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

我有一个很大的页面，上面有很多东西。因此，我有2个Vue实例用于页面的2个部分。如何将数据从一个Vue实例绑定到另一个Vue实例

这个例子应该说明我正在尝试做什么。（它不是那样工作的）

---

我仍然在寻找最好的解决方案。下面的代码感觉有点粗糙，但它可以工作

可以使用侦听表达式的更改并触发函数。在此函数中，您可以更新另一个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; }
  }
});

你可以在中看到这一点

---

此外，我想知道你是否需要这样做。如果这是一个现实生活中的情况，那么可能有更好的方法来处理这个问题，避免这种黑客式的解决方案

事先，我知道这不是您要问的问题，但我不知道您为什么需要两个Vue实例。为什么不将Vue绑定到

主体

，并将这两个Vue实例视为组件。做你想做的事情可能很困难，因为这不是你的本意。也许是，我不知道。我已经在身体上安装了Vue，但我还没有看到任何性能上的成功。这是一本书

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>

如果您正在寻找一种更好的方法来分离代码，那么您可能需要查看此文件

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

<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>

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