Question

我制作了两个组件，它们共享一个对象，如下：

UnitData: {
  FirstName: null,
  LastName: null,
  Department: null,
  OvertimeRate: null,
}

第一个组件有两个字段，它们绑定到上述UnitData对象的前两个属性，而第二个组件的两个字段绑定到后两个字段。组件是：

 <employee-basic-info-form-component
  :unit-data="UnitData"
  @next="Step = 2; UnitData = $event"
/>
 <employee-job-info-form-component
  :unit-data="UnitData"
  @next="Step = 3; UnitData = $event"
  @back="Step = 1"
/>

因此，在我的employee-basic-info-form-component.vue中，我有以下代码：

@Component({
  props: {
    unitData: Object
  },
})
export default class EmployeeBasicInfoFormComponent extends Vue {
  public UnitData = this.unitData;
}

并且这些字段工作正常，并且在发送表单时，我正在调用next()函数，其中包含this.$emit('next', this.UnitData);。

UnitData在@next="Step = 2; UnitData = $event"之后进行更新，但是第二个组件employee-job-info-form-component.vue不会更新UnitData的值，有什么建议吗？

因此，在我的employee-job-info-form-component.vue中，我有以下代码：

@Component({
  props: {
    unitData: Object
  },
})
export default class EmployeeJobInfoFormComponent extends Vue {
  public UnitData = this.unitData; //<-- this is not updating
}

属性在vue-class-component中不具有反应性

0 个答案: