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，要多动脑子呀！！！！