Vue道具数据未在子组件中更新

Question

大家好，我只想对vue props数据做一些解释。所以我将值从父组件传递到子组件。问题是，当父数据有数据更改/更新时，它不在子组件中更新。

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

但是使用道具名称{{testdata}}可以正确显示父级的数据

Vue.component('child-component', {
  template: '<div class="child">{{testData}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

提前致谢

小提琴链接

Answer 1

最好用一个非常简单的例子来解释

let a = 'foo'
let b = a
a = 'bar'

console.info('a', a)
console.info('b', b)

分配时...

val: this.testData

你设置的初始值的val一旦创建组件时。对道具的更改将不会以上项的val更改a不会在中反映出来b。

参见https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow