vue中父子組件中對象傳遞問題

 問題的產生

做一個員工管理系統demo，修改選中的數據時，需要從父組件中傳遞過來一個員工對 象。子組件直接用props中定義的用於接收父組件傳過來的值來展示，並且使用 :value.sync來綁定數據，這時候如果更改傳入子組件中的值時，父組件的值也會改變，並且是自動更新。但是我並不想要這種結果。

如何解決

我們可以在子組件中定義一個新的對象，在子組件的init方法中給這個對象賦值，注意：兩個對象不能直接“=”賦值，這樣只是對象傳遞，新對象還是指向父組件傳遞過來的對象，不能解決問題，我們應該一個字段一個字段的給新對象賦值

methods:{

//初始化
init(var1) {
this.employeeData1.EID=this.employeeData.EID;
this.employeeData1.ENAME=this.employeeData.ENAME;
this.employeeData1.EDEPARTMENTID=this.employeeData.EDEPARTMENTID;
this.employeeData1.EGENDER=this.employeeData.EGENDER;
this.employeeData1.EAGE=this.employeeData.EAGE;
this.employeeData1.EDATE=this.employeeData.EDATE;
this.employeeData1.EADDRESS=this.employeeData.EADDRESS;
this.employeeData1.ETEL=this.employeeData.ETEL;
this.employeeData1.EREMARK=this.employeeData.EREMARK;
this.employeeData1.ESTATE=this.employeeData.ESTATE;
}
}

 

新的問題產生

經過運行代碼又發現了新的問題，就是如果新增的時候，必須點擊兩次新增才能夠獲取到父組件傳過來的值。我想應該是init方法和傳值的過程是同時進行的，所以才導致第二次才能獲取到傳遞的值。那么我們為什么不能把想傳遞的值直接放在init方法中呢？

methods:{
        
          //初始化
        init(var1,info) {
            this.employeeData1.EID=info.EID;
            this.employeeData1.ENAME=info.ENAME;
            this.employeeData1.EDEPARTMENTID=info.EDEPARTMENTID;
            this.employeeData1.EGENDER=info.EGENDER;
            this.employeeData1.EAGE=info.EAGE;
            this.employeeData1.EDATE=info.EDATE;
            this.employeeData1.EADDRESS=info.EADDRESS;
            this.employeeData1.ETEL=info.ETEL;
            this.employeeData1.EREMARK=info.EREMARK;
            this.employeeData1.ESTATE=info.ESTATE;
        }
}        

 

這樣就解決了上述問題！
結論：父子組件傳值如果不是修改或者說不需要數據校驗，那么當然可以直接調用，但是如果涉及數據校驗，不能隨便傳值，那么就需要新的對象接收傳過來的值並且展示了！