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

Question

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 passes 'data1' to child via props,

child passes 'data2' to grandchild via props, data2.value = data1.id

See the setInterval function, it increases data1.id every second

But only child's dom updates

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

Someone can help?

Answer 1

The data as calculated from the initial value of the prop in the child component isn't actually being updated, as there's nothing changing it. It's disassociated from the prop upon creation.

What you want is for data2 to be computed, so it actually depends on the prop passed initially.

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