[英]Child Component not updating when parent updates vuejs
我有一个将对象传递给子组件的 vue 实例。 子组件有一个复选框,单击该复选框时会调用 vue 实例处理的事件,以更新传递给子组件的父对象。 根据vue 文档,我认为这会导致子组件更新相关字段。 但是,当我单击复选框时,日期字段并没有像我预期的那样更新。 在下图中,当我选中管理名称复选框时,我希望会出现当前日期,但我没有看到任何日期。 我在这里想念什么?
new Vue({
el: "#evaluations-app",
data: {
evaluation: new Evaluation()
},
methods: {
updateEmployeeSO: function (newSO, newSODate) {
this.evaluation.EmployeeSO = newSO;
this.evaluation.EmployeeSODate = newSODate;
},
updateReviewerSO: function (newSO, newSODate) {
this.evaluation.ReviewerSO = newSO;
this.evaluation.ReviewerSODate = newSODate;
},
updateManagementSO: function (newSO, newSODate) {
this.evaluation.ManagementSO = newSO;
this.evaluation.ManagementSODate = newSODate;
}
});
Vue.component('sign-off', {
props: ['initEvaluation', 'perspective'],
template: `
<div class="sign-off-comp">
<div class="sign-off-item">
<div class="sign-off-field-1 col-1">{{evaluation.EmployeeName}}</div>
<input :disabled="!enableEmployeeSO" v-model="evaluation.EmployeeSO" class="sign-off-field-2 col-2" type="checkbox" @click="EmployeeSOChanged"/>
<div class="sign-off-field-3 col-3">{{employeeSODate}}</div>
</div>
<div class="sign-off-item">
<div class="sign-off-field-1 col-1">{{evaluation.ReviewerName}}</div>
<input :disabled="!enableReviewerSO" v-model="evaluation.ReviewerSO" class="sign-off-field-2 col-2" type="checkbox" @click="ReviewerSOChanged"/>
<div class="sign-off-field-3 col-3">{{reviewerSODate}}</div>
</div>
<div class="sign-off-item">
<div class="sign-off-field-1 col-1">{{evaluation.ManagementName}}</div>
<input :disabled="!enableManagementSO" v-model="evaluation.ManagementSO" class="sign-off-field-2 col-2" type="checkbox" @click="ManagementSOChanged"/>
<div class="sign-off-field-3 col-3">{{managementSODate}}</div>
</div>
</div>
`,
data: function () {
return {
evaluation: this.initEvaluation,
employeeClicked: false,
reviewerClicked: false,
managementClicked: false,
currentCommentSource: this.perspective
}
},
methods: {
EmployeeSOChanged: function () {
this.employeeClicked = true;
//this.evaluation.EmployeeSODate == null || this.evaluation.EmployeeSODate == "" ? this.evaluation.EmployeeSODate = Helpers.getCurrentDate() : this.evaluation.EmployeeSODate = "";
this.$emit('employee-so-changed', this.evaluation.EmployeeSO, this.evaluation.EmployeeSODate);
},
ReviewerSOChanged: function () {
this.reviewerClicked = true;
//this.evaluation.ReviewerSODate == null || this.evaluation.ReviewerSODate == "" ? this.evaluation.ReviewerSODate = Helpers.getCurrentDate() : this.evaluation.ReviewerSODate = "";
this.$emit('reviewer-so-changed', this.evaluation.ReviewerSO, this.evaluation.ReviewerSODate);
},
ManagementSOChanged: function () {
this.managementClicked = true;
//this.evaluation.ManagementSODate == null || this.evaluation.ManagementSODate == "" ? this.evaluation.ManagementSODate = Helpers.getCurrentDate() : this.evaluation.ManagementSODate = "";
this.$emit('management-so-changed', this.evaluation.ManagementSO, this.evaluation.ManagementSODate == null || this.evaluation.ManagementSODate == "" ? Helpers.getCurrentDate() : "");
}
},
computed: {
enableEmployeeSO: function () {
return (this.perspective == "Employee" && !this.evaluation.EmployeeSO) || this.employeeClicked;
},
enableReviewerSO: function () {
return (this.perspective == "Reviewer" && !this.evaluation.ReviewerSO && this.evaluation.EmployeeSO) || this.reviewerClicked;
},
enableManagementSO: function () {
return (this.perspective == "Management" && !this.evaluation.ManagementSO && this.evaluation.ReviewerSO && this.evaluation.EmployeeSO) || this.managementClicked;
},
employeeSODate: function () {
return this.evaluation.EmployeeSODate != null && this.evaluation.EmployeeSODate == new Date("01-01-1900") ? "" : this.evaluation.EmployeeSODate != null && this.evaluation.EmployeeSODate.length >= 10 ? this.evaluation.EmployeeSODate.substring(0, 10) : this.evaluation.EmployeeSODate;
},
reviewerSODate: function () {
return this.evaluation.ReviewerSODate != null && this.evaluation.ReviewerSODate == new Date("01-01-1900") ? "" : this.evaluation.ReviewerSODate != null && this.evaluation.ReviewerSODate.length >= 10 ? this.evaluation.ReviewerSODate.substring(0, 10) : this.evaluation.ReviewerSODate;
},
managementSODate: function () {
return this.evaluation.ManagementSODate != null && this.evaluation.ManagementSODate == new Date("01-01-1900") ? "" : this.evaluation.ManagementSODate != null && this.evaluation.ManagementSODate.length >= 10 ? this.evaluation.ManagementSODate.substring(0, 10) : this.evaluation.ManagementSODate;
}
}
});
export class Evaluation {
private _EmployeeName: string;
private _EmployeeSO: boolean;
private _EmployeeSODate: Date;
private _ReviewerName: string;
private _ReviewerSO: boolean;
private _ReviewerSODate: Date;
private _ManagementReviewerName: string;
private _ManagementReviewerSO: boolean;
private _ManagementReviewerSODate: Date;
constructor() {
this._EmployeeName = "";
this._EmployeeSO = false;
this._EmployeeSODate = new Date("01-01-1900");
this._ReviewerName = "";
this._ReviewerSO = false;
this._ReviewerSODate = new Date("01-01-1900");
this._ManagementReviewerName = "";
this._ManagementReviewerSO = false;
this._ManagementReviewerSODate = new Date("01-01-1900");
}
get EmployeeName(): string {
return this._EmployeeName;
}
set EmployeeName(employeeName: string) {
if (this._EmployeeName != employeeName) {
this._EmployeeName = employeeName;
}
}
get EmployeeSO(): boolean {
return this._EmployeeSO;
}
set EmployeeSO(employeeSO: boolean) {
if (this._EmployeeSO != employeeSO) {
this._EmployeeSO = employeeSO;
}
}
get EmployeeSODate(): Date {
return this._EmployeeSODate;
}
set EmployeeSODate(employeeSODate: Date) {
if (this._EmployeeSODate != employeeSODate) {
this._EmployeeSODate = employeeSODate;
}
}
get ReviewerName(): string {
return this._ReviewerName;
}
set ReviewerName(reviewerName: string) {
if (this._ReviewerName != reviewerName) {
this._ReviewerName = reviewerName;
}
}
get ReviewerSO(): boolean {
return this._ReviewerSO;
}
set ReviewerSO(reviewerSO: boolean) {
if (this._ReviewerSO != reviewerSO) {
this._ReviewerSO = reviewerSO;
}
}
get ReviewerSODate(): Date {
return this._ReviewerSODate;
}
set ReviewerSODate(reviewerSODate: Date) {
if (this._ReviewerSODate != reviewerSODate) {
this._ReviewerSODate = reviewerSODate;
}
}
get ManagementReviewerName(): string {
return this._ManagementReviewerName;
}
set ManagementReviewerName(managementReviewerName: string) {
if (this._ManagementReviewerName != managementReviewerName) {
this._ManagementReviewerName = managementReviewerName;
}
}
get ManagementReviewerSO(): boolean {
return this._ManagementReviewerSO;
}
set ManagementReviewerSO(managementReviewerSO: boolean) {
if (this._ManagementReviewerSO != managementReviewerSO) {
this._ManagementReviewerSO = managementReviewerSO;
}
}
get ManagementReviewerSODate(): Date {
return this._ManagementReviewerSODate;
}
set ManagementReviewerSODate(managementReviewerSODate: Date) {
if (this._ManagementReviewerSODate != managementReviewerSODate) {
this._ManagementReviewerSODate = managementReviewerSODate;
}
}
}
我刚刚注意到,在我的子组件中,我使用的是MangementSO
和ManagementSODate
而模型有ManagementReviewerSO
和ManagementReviewerSODate
。 更改这些修复了我的代码。 但是,基于下面的讨论,我有点困惑,为什么将 props 放入本地数据是处理这种情况的不正确方法。 有人可以解释一下吗?
使用 props初始化数据属性并没有错。 我认为这里很多评论中最大的混淆来源是initEvaluation
是一个object 。 在这种情况下,对该对象的任何更改都将反映在使用该对象的任何地方。
在有问题的代码中,父组件中的evaluation
和子组件中的evaluation
是同一个对象。 对该对象所做的更改将反映在父对象中,并且 Vue 不会有任何抱怨,因为您在技术上并没有改变对对象的引用,您只是在更改它的属性值。
通常,如果您将原始值作为属性传递,Vue 会发出警告。 假设您传递了一个字符串值,然后将该值与v-model
一起使用。 在这种情况下,Vue 会抛出一个警告(在开发版本中)你正在改变一个属性。 警告有两个原因; 首先是因为该值不会传播到父级(这可能是意外行为),其次是因为每当父级中的数据发生更改时,它都会覆盖子级中的更改。
但是,当对象或数组作为属性传递时,Vue 只会在您更改对象引用时报错。 例如,在您的代码中,如果您要这样做:
this.initEvaluation = new Evaluation()
Vue 会抱怨你正在改变一个属性。 但是,在您的代码中,您只是更改了initEvaluation
的属性,这不会导致警告,并且还会导致这些值在各处反映出来,因为您在各处都在更新同一个对象。
其后果之一是在您的代码中有效地设置evaluation: this.initEvaluation
是虚假的。 您可以在模板中使用initEvaluation
并获得与使用evaluation
相同的结果。 同样,这是因为它们是同一个对象。 这是路易斯试图解释的部分内容。 在这种情况下,路易斯的第一句话有点误导。 data 函数只被调用一次,这意味着用属性初始化的数据只会接收一次属性的值。 但是,因为initEvaluation
是一个对象,所以在问题的代码中并不重要。 对象引用永远不会改变,只有属性会改变。 如果父母出于某种原因要更改引用,则子项中的evaluation
将不会使用新的引用进行更新。
是否需要立即在任何地方反映对象的更新是值得商榷的。 在许多情况下,您希望控制何时发生更新。 在这些情况下,您可能会执行类似evaluation: Object.assign({}, this.initEvaluation)
的操作,它会复制initEvaluation
对象。 这样做的好处是您可以对子组件中的对象进行任意数量的更改,而这些更改不会反映在组件之外。 然后,在您验证所有更改都正确后,您可以发出这些更改。
当您基于props
( initEvaluation
和perspective
)创建data
属性时,它们不再依赖于道具并且您仅引用数据,就好像它们只是副本一样,而不是收到的实际道具。 所以,他们不会对道具做出反应。
由于您似乎没有在组件中更新它们,因此您可以直接引用props
,而不是从props
创建的data
。
编辑:从头开始,您在evaluation
时使用v-model
,因此如果您直接引用它们,您将更改道具。
所以,一般来说,我会从数据中删除它:
evaluation: this.initEvaluation
// ...
currentCommentSource: this.perspective
并直接引用props
,并按照文档中的建议将v-model
替换为:value
和@input
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.