最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Output data from one Vue.js instance into another - Stack Overflow

programmeradmin1浏览0评论

I have a pretty big page with lots of stuff going on. So i have 2 Vue instances for 2 parts of the page. How can i bind data from one Vue instance into another?

This example should show what i am trying to do. (it's not working that way)

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

I have a pretty big page with lots of stuff going on. So i have 2 Vue instances for 2 parts of the page. How can i bind data from one Vue instance into another?

This example should show what i am trying to do. (it's not working that way)

<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'
});
Share Improve this question asked May 29, 2015 at 22:11 IanDessIanDess 6972 gold badges11 silver badges26 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

In advance, I know this isn't the question you are asking, but I don't know why you need two instances of Vue. Why not just bind Vue to the body and treat both the Vue instances as ponents. It might be difficult to do what you are trying to do, because it was not intended. Maybe it was, I don't know. I have set Vue up on the body and I haven't seen a performance hit. Here is a 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.ponent('app1', VueComponent1);
var app2 = Vue.ponent('app2', VueComponent2);
var app = new Vue({
    el: 'body',
    data: { msg: 'Everybody loves Vue.' }
});

If you are looking for a better way to separate you code, you might want to check out this Vue with Browserify example.

Laracasts has a free series on Vue which has been pretty informative as well.

I am still looking for the best solution. The following feels a bit hacky but it works.

You can use the watch option to listen for the change of an expression and trigger a function. In this function you can update the desired data of another Vue instance. In you example we would do this:

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

You can see this at work in this jsbin.

Moreover, I am wondering if you even need to do this. If this was a real-life-situation there could be better ways to handle this avoiding this hacky solution.

发布评论

评论列表(0)

  1. 暂无评论