Vue使子组件中的数据不更新 [英] Vue props data not updating in child component
问题描述
大家好我只想要一些关于vue道具数据的解释。所以我将值从父组件传递给子组件。问题是当父数据有数据更改/更新时它没有在子组件中更新。
Hi everyone I just want some explanation about vue props data. So I'm passing value from parent component to child component. The thing is when parent data has data changes/update it's not updating in child component.
Vue.component('child-component', {
template: '<div class="child">{{val}}</div>',
props: ['testData'],
data: function () {
return {
val: this.testData
}
}
});
但使用道具名称 {{testdata}} 正在显示来自父级的数据
But using the props name {{testdata}} it's displaying the data from parent properly
Vue.component('child-component', {
template: '<div class="child">{{testData}}</div>',
props: ['testData'],
data: function () {
return {
val: this.testData
}
}
});
提前致谢
小提琴 link
推荐答案
最好用一个非常简单的例子解释
This is best explained with a very simple example
let a = 'foo'
let b = a
a = 'bar'
console.info('a', a)
console.info('b', b)
分配时...
val: this.testData
您正在设置<的初始值创建组件时code> val 一次。支柱的更改不会反映在 val
中,就像上面 a
的更改未反映在 b
。
you're setting the initial value of val
once when the component is created. Changes to the prop will not be reflected in val
in the same way that changes to a
above are not reflected in b
.
参见 https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
这篇关于Vue使子组件中的数据不更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!