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

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

＆＃13;

let a = 'foo'
let b = a
a = 'bar'

console.info('a', a)
console.info('b', b)

＆＃13;

分配时......

val: this.testData

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

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

Answer 2

我解决！ 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);
     }
}

Vue使子组件中的数据不更新

2 个答案: