Vue实例之间的链接数据

Question

我修剪了很多代码，但基本上我想vmTimer.step镜像vmPurchase.step。根据http://vuejs.org/api/#Data_Proxying的“数据代理”部分，我应该做的更正，对吧？当vmPurchase.step被改为1，它仍然0vmTimer.step

var vmPurchase = new Vue({ 
    data: { 
     step: 0 
    } 
}); 

var vmTimer = new Vue({ 
    data: { 
     step: vmPurchase.$data.step // sync the steps 
    } 
}); 

Answer 1

的data部分下不执行绑定 - 它执行初始化。你需要把一个watch是这样的：

http://jsfiddle.net/davidkhess/xkyeymvp/

var vmPurchase = new Vue({ 
    data: { 
     step: 0 
    } 
}); 

var vmTimer = new Vue({ 
    el: "#main", 
    data: { 
     vmPurchase: vmPurchase, 
     step: vmPurchase.step 
    }, 
    methods: { 
     increment: function() { 
      vmPurchase.step += 1; 
     } 
    }, 
    watch: { 
     "vmPurchase.step": function (newValue, oldValue) { 
      this.step = vmPurchase.step; 
     } 
    } 
}); 

与

<div id="main"> 
    {{ step }} 
    <button type="button" v-on="click: increment">Increment</button> 
</div> 

注意，您是由两种不同的new声明这是一个有点创建两个不同的Vue层次一个风格问题。为了利用“道具”和“事件”，您通常会将其作为另一个组件的一部分，将它们放入相关的层次结构中。