父傳子數據,子修改數據,父不改
場景: 列表(父組件)點擊,彈出表單并傳遞當前行數據到表單(子組件),表單使用雙向綁定(elementUI el-form),需求是實現表單可編輯(v-model),且不修改列表數據(取消時列表數據未變).
-
直接使用props屬性內數據,可以實現表單和列表數據修改同步(不符子不改父的原則),切換點擊行時可以同步當前行數據
<Edit :articleForm='rowData' />//父調用子組件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行點擊事件 this.rowData = row; }, } }<el-form :model="articleForm" ref='articleForm'>//子組件 <el-form-item label="標題"> <el-input v-model="articleForm.title" placeholder="請輸入標題"></el-input> </el-form-item> </el-form> export default { data() { return { }; }, props: [ 'articleForm', 'type', 'reload' ], }
-
在data里將父組件傳遞的數據進行一次賦值(別名),實現父子組件取消雙向綁定(Object.assign).(無法在切換行時將父組件傳遞的props同步到articleForm數據)
<Edit :rowData='rowData' />//父調用子組件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行點擊事件,copy行數據 this.rowData = row; }, } }<el-form :model="articleForm" ref='articleForm'>//子組件 <el-form-item label="標題"> <el-input v-model="articleForm.title" placeholder="請輸入標題"></el-input> </el-form-item> </el-form> export default { data() { return { //articleForm:this.rowData,//別名 articleForm:Object.assign({},this.rowData)//別名,并避免綁定 }; }, props: [ 'rowData', 'type', 'reload' ], } -
props接受數據,使用computed賦值,實現切換行更改articleForm.
<Edit :rowData='rowData' />//父調用子組件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行點擊事件 this.rowData = row; }, } }<el-form :model="articleForm" ref='articleForm'>//子組件 <el-form-item label="標題"> <el-input v-model="articleForm.title" placeholder="請輸入標題"></el-input> </el-form-item> </el-form> export default { data() { return { }; }, props: [ 'rowData', 'type', 'reload' ], computed: { articleForm: function() { //return this.rowData//切換行可以同步父組件傳遞的新數據,且子組件會更改父組件數據,等同于方案1 return Object.assign({},this.rowData)//切換行可以同步父組件傳遞的新數據,但子組件無法編輯數據 } }, } -
在data里將父組件傳遞的數據進行copy,實現父子組件取消雙向綁定.使用watch監聽實現切換行時將父組件數據同步到articleForm數據,符合需求
<Edit :rowData='rowData' />//父調用子組件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行點擊事件 this.rowData = row; }, } }<el-form :model="articleForm" ref='articleForm'>//子組件 <el-form-item label="標題"> <el-input v-model="articleForm.title" placeholder="請輸入標題"></el-input> </el-form-item> </el-form> export default { data() { return { img_file: [], articleForm:{} //articleForm:Object.assign({},this.rowData)//別名,并copy }; }, props: [ 'rowData', 'type', 'reload' ], watch:{ rowData: { deep: true, immediate: true,//立刻監聽,不用在data里進行第一次賦值 handler: function (val, oldVal) { this.articleForm = Object.assign({},val); }, } }, } -
在父組件進行數據源深copy,子組件就可以隨意了,符合需求(最佳)
<Edit :articleForm='rowData' />//父調用子組件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行點擊事件,copy行數據 this.rowData = Object.assign({},row); }, } }<el-form :model="articleForm" ref='articleForm'>//子組件 <el-form-item label="標題"> <el-input v-model="articleForm.title" placeholder="請輸入標題"></el-input> </el-form-item> </el-form> export default { data() { return { img_file: [], }; }, props: [ 'articleForm',//或者使用computed賦值(改名) 'type', 'reload' ], }
