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層次一個風格問題。爲了利用「道具」和「事件」，您通常會將其作爲另一個組件的一部分，將它們放入相關的層次結構中。