vue父子传参场景集锦(一) vue父子传参场景集锦(一)

父传子数据,子修改数据,父不改场景: 列表(父组件)点击,弹出表单并传递当前行数据到表单(子组件),表单使用双向绑定(elementUI el-form),需求是实现表单可编辑(v-model),且不修改列表数据(取消时列表数据未变).

直接使用props属性内数据,可以实现表单和列表数据修改同步(不符子不改父的原则),切换点击行时可以同步当前行数据

//父调用子组件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行点击事件 this.rowData = https://www.it610.com/article/row; }, } }

//子组件 export default { data() { return { }; }, props: [ 'articleForm', 'type', 'reload' ], }

在data里将父组件传递的数据进行一次赋值(别名),实现父子组件取消双向绑定(Object.assign).(无法在切换行时将父组件传递的props同步到articleForm数据)

//父调用子组件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行点击事件,copy行数据 this.rowData = https://www.it610.com/article/row; }, } }

//子组件 export default { data() { return { //articleForm:this.rowData,//别名 articleForm:Object.assign({},this.rowData)//别名,并避免绑定 }; }, props: [ 'rowData', 'type', 'reload' ], }
props接受数据,使用computed赋值,实现切换行更改articleForm.

//父调用子组件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行点击事件 this.rowData = https://www.it610.com/article/row; }, } }

//子组件 export default { data() { return { }; }, props: [ 'rowData', 'type', 'reload' ], computed: { articleForm: function() { //return this.rowData//切换行可以同步父组件传递的新数据,且子组件会更改父组件数据,等同于方案1 return Object.assign({},this.rowData)//切换行可以同步父组件传递的新数据,但子组件无法编辑数据 } }, }
在data里将父组件传递的数据进行copy,实现父子组件取消双向绑定.使用watch监听实现切换行时将父组件数据同步到articleForm数据,符合需求

//父调用子组件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行点击事件 this.rowData = https://www.it610.com/article/row; }, } }

//子组件 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); }, } }, }
【vue父子传参场景集锦(一)】在父组件进行数据源深copy,子组件就可以随意了,符合需求(最佳)

//父调用子组件 rowData:{title:"xx",content:"xx"} export default { data() { return { rowData:{}, } }, methods(){ edit(row) {//行点击事件,copy行数据 this.rowData = https://www.it610.com/article/Object.assign({},row); }, } }

//子组件 export default { data() { return { img_file: [], }; }, props: [ 'articleForm',//或者使用computed赋值(改名) 'type', 'reload' ], }