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

Posted 2023-02-22

【中文标题】Vue props 数据未在子组件中更新

【英文标题】：Vue props data not updating in child component

【发布时间】：2018-08-31 08:08:29

【问题描述】：

大家好，我只是想要一些关于 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

【问题讨论】：

您正在val: this.testData 中创建副本。这几乎取决于 JS 引用。

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

感谢@Phil，但值更改时 val 不会更新

另外，你有什么问题？

数据函数在组件生命周期内被调用一次，也就是说在组件创建时设置了val。您的代码中没有任何内容可以自动更新val。您可能希望 val 成为计算属性，或者只是渲染道具。或者您会观看testData 并在发生更改时更新val。

【参考方案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);
     

【参考方案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

【讨论】：

这并没有回答如何使道具动态化的问题。

@grantzukowski 这不是 OP 所要求的。这回答了所提出的问题。其实我不知道你在说什么

他在问如何使传入的道具值动态化，所以如果它发生变化，孩子就会做出反应。

@grantzukowski no "he" 不是。我建议您再次阅读该问题和有关该问题的 cmets。 OP 的问题清楚地表明他们能够看到传入的 prop 值的变化（参见第二个 sn-p）

确实如我所说。我建议你再读一遍这个问题。在这种情况下，我认为 prop 需要作为计算值传入，并且子项中需要有一个 watcher。解释这个概念并不是回答问题。 ***.com/questions/50035675/…