Vue - 如何维护从祖父母到孙子的数据流？答案

【问题标题】：Vue - How to maintain a data flow from grandparent to grandchild?Vue - 如何维护从祖父母到孙子的数据流？
【发布时间】：2017-11-14 04:06:30
【问题描述】：

Vue.component('grandchild', {
  template: '<div>grandchild - {{ data2.value }}</div>',
  props: [ 'data2' ]
});

Vue.component('child', {
    template: '<div>child - {{ data1.id }}<grandchild v-bind:data2="data2"></grandchild></div>',
  props: [ 'data1' ],
  data () {
    return {
        data2: {
        value: this.data1.id
      }
    };
  }
});

let v = new Vue({
    el: '#div',
  data: {
    data1: {
        id: 3
    }
  }
});

setInterval(function () {
    v.data1.id++;
}, 1000);

v 通过 props 将 'data1' 传递给孩子，

child 通过 props 将 'data2' 传递给孙子，data2.value = data1.id

见setInterval函数，它每秒增加data1.id

但只有孩子的 dom 更新

jsFiddle: https://jsfiddle.net/xfgzwjef/1/

有人可以帮忙吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

根据子组件中 prop 的初始值计算的数据实际上并没有被更新，因为没有任何改变。它在创建时与道具分离。

你想要的是计算data2，所以它实际上取决于最初传递的道具。

computed: {
  data2() {
    return {value: this.data1.id}
  }
}

【讨论】：