Vue - Как сохранить поток данных от бабушки и дедушки к внуку?

Question

Vue - Как сохранить поток данных от бабушки и дедушки к внуку?

1

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 передает данные '1 ребенку через реквизит,

ребенок передает "данные2" внуку через реквизит, data2.value = data1.id

См. Функцию setInterval, она увеличивает data1.id каждую секунду

Но только обновление дочернего домика

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

Кто-то может помочь?

Yuanqiu Li 12 июнь 2017, в 18:36

Источник

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Luis Orduz · Accepted Answer · 2017-06-12T14-12-00.000Z

Данные, рассчитанные из начального значения prop в дочернем компоненте, фактически не обновляются, так как ничего не меняют. Он отделяется от опоры при создании.

То, что вы хотите, - это вычисление data2, поэтому оно фактически зависит от пропущенного ранее.

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