vue props引用型数据 子组件修改影响父组件 深拷贝浅拷贝问题
功能:表格中点击编辑,弹出层显示该条数据,可以编辑。
·
功能:表格中点击编辑,弹出层显示该条数据,可以编辑。
问题:写的途中发现,在编辑界面编辑数据,表格中的数据也变了。当时就觉得奇怪,vue的单向数据流,只能父改变子才对,怎么会子改变父。然后就去百度。有一篇让我让我明白了,感觉写的也挺清楚的。文章链接
同时也发现,vue官方文档就提到过这个问题(但是没有给解决方案的样子,也可能是我眼瞎,溜走。。。)
总来的来说就是引用类型
的深拷贝
和浅拷贝
的问题
知道问题原因,那咱肯定得找解决办法呀。当时大概是知道应该是使用 JSON.parse(JSON.stringify(对象))
,但是怎样用最简短的代码来写嘞?我开启了我百度之旅,CV之旅。
尝试了各种人家的代码,都没啥用,气的我,既然都大概知道了原理,我就自己写。最后弄出来了
1:props接收父组件的数据
2:data新建一个字段
3:监听props的变化
4:props变化代表,父组件是传了新的数据,也就是点了另一行的“编辑按钮”
5:将新的props深拷贝下复制给data
然后!!修改时父组件确实不会跟着变,但是!编辑确定修改,表格数据没有变化,看控制台表格的数据是有变的。。一下子就想到了vue的深入响应式原理
这部分的文章。
我写了,但是还是没有用,就去Baidu,发现解决办法文章链接
最后贴出代码
父组件
<template>
<div class="proput">
<!-- 搜索新增等 -->
<div class="head_class">
<el-input placeholder="请输入商品名称" class="inline_inp" v-model="searchVal">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button type="primary" size="mini">查询</el-button>
<el-button type="primary" size="mini" icon="el-icon-plus">新增</el-button>
</div>
<div class="tables">
<el-table :data="tableData" border :key="tableKey" row-key="id" style="width: 100%">
<el-table-column fixed type="index" label="序号" width="50">
</el-table-column>
<el-table-column fixed prop="id" label="id" width="50">
</el-table-column>
<el-table-column prop="stationid" label="场馆id" width="120">
</el-table-column>
<el-table-column prop="title" label="商品名" width="120">
</el-table-column>
<el-table-column prop="money" label="价格" width="120">
</el-table-column>
<el-table-column prop="picurl" label="图片" width="50">
</el-table-column>
<el-table-column prop="createtime" label="注册时间">
<template slot-scope="scope">{{ $utils.renderTime(scope.row.createtime) }}</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="editInfoFun(scope.row,scope.$index)">编辑</el-button>
<el-button size="mini" type="danger" @click="delInfoFun(scope,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 编辑弹窗 -->
<el-dialog title="编辑商品信息" :visible.sync="dialogFormVisible">
<edit-user :info="editInfo" @sureEdit="sureEdit" @close="dialogFormVisible=false"></edit-user>
</el-dialog>
</div>
</template>
<script>
import EditUser from "./Edit.vue";
export default {
components: { EditUser },
data() {
return {
tableData: [],
dialogFormVisible: false,
editInfo: {},
searchVal: "",
tableKey: true,
};
},
methods: {
editInfoFun(info, index) {
this.dialogFormVisible = true;
this.editInfo = Object.assign(info, { index: index });
},
delInfoFun(scope, index) {
this.$confirm(`是否删除${scope.row.title}`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableData.splice(index, 1);
})
.catch(() => {});
},
// 子组件确定编辑
sureEdit(info) {
console.log(this.tableData[info.index]);
//不要直接this.tableData[info.index]=index啦!!!
this.tableData[info.index] = Object.assign(
{},
this.tableData[info.index],
info
);
this.tableKey = !this.tableKey;
this.dialogFormVisible = false;
},
},
};
</script>
<style scoped lang="less">
.proput {
padding: 16px;
background-color: #fff;
}
.head_class {
height: 60px;
background-color: #fff;
}
/deep/.inline_inp {
width: 220px;
margin-right: 10px;
}
</style>
子组件
<template>
<div class="edit_pro">
<el-form ref="form" :model="editInfo" label-width="80px">
<el-form-item label="商品名">
<el-input v-model="editInfo.title" maxlength="8"></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="editInfo.money" maxlength="8"></el-input>
</el-form-item>
<el-form-item label="图片链接">
<el-input v-model="editInfo.picurl" maxlength="8"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="$emit('sureEdit',editInfo)">确定修改</el-button>
<el-button size="small" @click="$emit('close')">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {//1:props接收数据
info: {
type: Object,
default: () => {},
},
},
data() {
return {
editInfo: JSON.parse(JSON.stringify(this.info)),//2:新建数据,子组件修改的都是这个,而不是直接props
};
},
watch: {
info: function (val) {//3:监听
this.editInfo= JSON.parse(JSON.stringify(this.info));//4:赋值,注意是要深拷贝哦。这里写this.info和val都可以,因为只有重新打开弹窗,this.info才会变
},
}
};
</script>
总结:深拷贝浅拷贝,vue响应式原理
反思:要有自信,相信自己,明明大概都知道原因,也大概知道怎么解决,不要一味的去CV,要多动脑子呀!!!!
更多推荐
已为社区贡献7条内容
所有评论(0)