Question

我修剪了很多代码，但基本上我希望vmTimer.step能够镜像vmPurchase.step。根据＆＃34; Data Proxying＆＃34; http://vuejs.org/api/#Data_Proxying的一部分，我应该这样做，对吧？当vmPurchase.step更改为1后，0

下的vmTimer.step仍为

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

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

SELECT * from Activity
ORDER BY startDate desc, startTime desc

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层次结构，这有点像样式问题。为了利用“道具”和“事件”，你通常会将一个组件作为另一个组件，将它们放入相关的层次结构中。

在Vue实例之间链接数据

1 个答案: