The vUE parent component passes variables to the child component. When the child component’s object is changed, the parent component also changes

1. Problem scenario

First I reference a child component in the parent page, and I pass the value to the child component when clicked

showItem(stepJsonItem: any) {
    var viewDlg = this.$refs.viewItemDlg as ViewTeachPlatformItemDialog;
    viewDlg.showDlg("Modified Record", stepJsonItem);
    console.log("viewDlg", viewDlg);
  }
Copy the code

And then in the child component I’m going to receive that value

showDlg(title: string, item: any) {
    this.curTitle = title;
    this.isShowDialog = true;
    this.dataObj = item;
  }
Copy the code

The problem is that when I modify the object in the child component, the object in the parent component changes too!

At this point, their reference address is one, and the address is stored in stack memory, and our variable is stored in heap memory. For example, our Vue Ajax requests an interface, and assigns one of the data values to two variables in data at the same time. If you modify one of the two variables, the other one will also change. The solution is to change its reference address,

Parse (json.stringify (item)); this.dataobj = json.parse (json.stringify (item));

2. Vue update arrays do not render views

updateItem(data: any) {
    var tempIndex = data._index;
    this.stepJsonbArr[tempIndex]=data;
  }
Copy the code

Because vue implements bidirectional data binding through data hijacking, that is, there is an Object.defineProperty() method on all objects, which is implemented by listening for set and get methods. Arrays do not have either of these methods, so views are not updated. The solution is that we need to actively notify VUE;

this.$set(this.stepJsonbArr, tempIndex, data);

this.stepJsonbArr.splice(tempIndex,1,data);
Copy the code