Vue props 数据未在子组件中更新

Question

大家好，我只是想要一些关于 vue 道具数据的解释。所以我将值从父组件传递给子组件。问题是当父数据发生数据更改/更新时，它不会在子组件中更新。

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
    }
  }
});

提前致谢

小提琴link

Answer 1

我解决了！ this.$set(this.mesas, i, event);

data() {
    return { mesas: [] }
},
components: {
    'table-item': table_l,    
},
methods: {
    deleteMesa: function(event) {
        let i = this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a borrare", i); 
        this.mesas.splice(i, 1);
    },
    updateMesa: function(event) {
        let i =this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a actualizar", i); 
        ///    With this method Vue say Warn
        //this.mesas[i]=event;  
        /// i Resolve as follow
        this.$set(this.mesas, i, event);
     },
     // Adds Useres online
     addMesa: function(me) {
         console.log(me);
         this.mesas.push(me);
     }
}

Answer 2

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

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

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

当你分配...

val: this.testData

您在创建组件时设置了一次val 的初始值。对 prop 的更改不会反映在 val 中，就像上面对 a 的更改不会反映在 b 中一样。

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