Avoid mutating a prop directly since the value will be overwritten whenever

vue项目子组件里的某个方法调用的时候报上述错误

1.父组件

2.子组件

<template>
  <div>
    <div>
      <ep-model
        title="关联单证"
        v-model="model1"
        width="1000px"
        :wrap-close="false"
      >
        <ep-form
          ref="portReleaseInexpRltForm"
          :form="portReleaseInexpRltForm"
          name-width="163px"
          :rules="page_rules"
        >
          <ep-row :gutter="7">
            <ep-col :col="8">
              <ep-form-item attr="preentNo" label="凭证编号">
                <ep-input
                  v-model="portReleaseInexpRltForm.preentNo"
                  name="preentNo"
                  :maxlength="64"
                  disabled
                ></ep-input>
              </ep-form-item>
            </ep-col>
            <ep-col :col="8">
              <ep-form-item attr="inExpWhNo" label="ERP/WMS出入库编号">
                <ep-input
                  v-model="portReleaseInexpRltForm.inExpWhNo"
                  name="inExpWhNo"
                  :maxlength="64"
                  :disabled="disabledFlag"
                ></ep-input>
              </ep-form-item>
            </ep-col>

            <ep-col :col="8">
              <ep-form-item attr="inExpTime" label="ERP/WMS出入库日期">
                <ep-date
                  v-model="portReleaseInexpRltForm.inExpTime"
                  name="inExpTime"
                  type="dateTime"
                  :disabled="disabledFlag"
                ></ep-date>
              </ep-form-item>
            </ep-col>
          </ep-row>
          <div style="text-align: center;" v-if="!disabledFlag">
            <ep-button
              type="primary"
              size="small"
              @click="addOtherClare"
              icon="checkmark-round"
              >确认</ep-button
            >
          </div>
        </ep-form>
      </ep-model>
      <!--表格-->
      <div class="ep-card card-margin relative">
        <div class="card-body">
          <div class="block">
            <ep-button
              type="success"
              size="small"
              @click="addOther"
              icon="plus-round"
              >新增</ep-button
            >
            <ep-button type="primary" size="small" @click="doUpdate" icon="edit"
              >修改</ep-button
            >
            <ep-button
              type="danger"
              size="small"
              icon="trash-a"
              @click="doDelete"
              >删除</ep-button
            >
          </div>
          <div class="block">
            <ep-table
              ref="table"
              :height="400"
              :data="newDtFormInExpTypeLatedList"
              @selection-change="handleSelect1"
              :loading="loading"
              :head-color="headColor"
              @row-dblclick="select2Info"
            >
              <ep-table-item type="select"></ep-table-item>
              <ep-table-item
                column="preentNo"
                width="300"
                title="凭证编号"
              ></ep-table-item>
              <ep-table-item
                column="inExpWhNo"
                title="ERP/WMS出入库编号"
                width="350"
              ></ep-table-item>
              <ep-table-item
                column="inExpTime"
                title="ERP/WMS出入库日期"
              ></ep-table-item>
            </ep-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import misList from "src/common/mislist";
import { cloneObj, getToken } from "utils";
import mixin from "../mixin";
export default {
  extends: misList, // 务必继承
  mixins: [mixin],
  components: {},
  props: {
    dtFormInExpTypeLatedList: {
      type: Array,
      default: function () {
        return [];
      },
    },
   
  },
  data() {
    return {
      newDtFormInExpTypeLatedList: this.dtFormInExpTypeLatedList,
      inexpRltPreentNo: "",
      inexpRltPid: "",
      headColor: true,
      selectItems: [],
      info: "",
      portReleaseInexpRltForm: {
        id: "",
        pid: this.inexpRltPid,
        orgId: this.$store.getters.getId,
        preentNo: this.inexpRltPreentNo,
        inExpWhNo: "",
        inExpTime: "",
      },
      model1: false,
      loading: false,
      disabledFlag: true,
      page_rules: {
        inExpWhNo: { required: true, message: "不能为空", trigger: "change" },
        inExpTime: {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
      },
    };
  },
  watch: {
    dtFormInExpTypeLatedList(val) {
      this.newDtFormInExpTypeLatedList = val;
    },
  },
  created() {
    this.getFormData1();
  },
  computed: {},
  mounted() {},
  methods: {
    handleSelect1(val) {
      this.selectLength = val.length;
      this.selectItems = val;
    },

    select2Info(event, row, index) {
      this.portReleaseInexpRltForm = row;
      this.model1 = true;
      this.disabledFlag = true;
    },
    close1Model() {
      this.model1 = false;
    },
    //调接口
    addOtherClare(info) {
      this.$refs["portReleaseInexpRltForm"].validate((valid) => {
        if (!valid) {
          this.$pop({
            type: "danger",
            message: "表单验证失败",
          });
          return;
        } else {
          //新增
          if (this.info == 1) {
            let data = [];
    
            let bodyForm = this.portReleaseInexpRltForm;
            data.push(cloneObj(bodyForm));
            this.$post("portReleasesaveInexpRlt", data).then((res) => {
              this.model1 = false;
              this.$emit("addOtherClare", info);
              this.dtFormInExpTypeLatedList.push(cloneObj(bodyForm));
              this.getFormData();
            });
          }
          //修改
          if (this.info == 2) {
            let portReleaseInexpRltForm = this.dtFormInExpTypeLatedList[0];

            let portReleaseInexpRltFormCopy = cloneObj(portReleaseInexpRltForm);
            let data = [];
            let bodyForm = this.portReleaseInexpRltForm;
            data.push(cloneObj(bodyForm));
            this.$post("portReleaseupdInexpRlt", data).then((res) => {
              this.model1 = false;
              this.dtFormInExpTypeLatedList.push(cloneObj(bodyForm));
              this.getFormData();
              
            });
          }
        }
      });
    },
    //新增
    addOther() {
      this.model1 = true;
      this.disabledFlag = false;
      this.info = 1;
      this.portReleaseInexpRltForm.inExpWhNo = "";
      this.portReleaseInexpRltForm.inExpTime = "";
    
    },

    //修改
    doUpdate() {
      let selectData = this.selectItems;
      if (selectData.length === 0 || selectData.length > 1) {
        this.$pop({
          type: "danger",
          message: "请选择一条数据",
        });
      } else {
        //console.log(selectData[0].id);
        this.model1 = true;
        this.disabledFlag = false;
        let inexpId = selectData[0].id;
        let dtFormInExpTypeLated1 = this.dtFormInExpTypeLatedList.find(
          (item) => item.id == inexpId
        );
        console.log(dtFormInExpTypeLated1);
        this.portReleaseInexpRltForm = dtFormInExpTypeLated1;
        this.info = 2;
      }
    },

    //删除
    doDelete() {
      let selectData = this.selectItems;
      if (selectData.length == 0) {
        this.$pop({
          type: "danger",
          message: "请选择数据",
        });
        return;
      }

      this.$confirm({
        word: "是否要删除所选条目信息！",
        callback: (errorInfo) => {
          if (errorInfo) {
            let id = [];
            selectData.forEach((item) => {
              id.push(item.id);
            });
            let ids = id.join();
           
            let data = {};
            data["ids"] = ids;
            this.$post("portReleasedelInexpRlt", data)
              .then((responseData) => {
                this.refresh(true);
                this.$pop({
                  type: "success",
                  message: "删除成功",
                });
              })
              .catch((e) => {
                this.loading = false;
              });
          } else {
            return;
          }
        },
      });
    },
    //详情
    getFormData() {
      let data = {};
      data["id"] = this.$route.query.id;
      this.$post("protReleasegetDetail", data)
        .then((responseData) => {
          this.dtFormInExpTypeLatedList =
            responseData.map.data.portReleaseInexpRlt;
          //this.$router.go(0);
        })
        .catch((e) => {});
    },
    getFormData1() {
      let data = {};
      data["id"] = this.$route.query.id;
      this.$post("protReleasegetDetail", data)
        .then((responseData) => {
          let inexpRltPreentNo1 = responseData.map.data.preentNo;
          this.portReleaseInexpRltForm.preentNo = inexpRltPreentNo1;
          let inexpRltPid1 = responseData.map.data.id;
          this.portReleaseInexpRltForm.pid = inexpRltPid1;

          //this.dtFormInExpTypeLated = responseData.map.data.portReleaseInexpRlt;
          //this.$router.go(0);
        })
        .catch((e) => {});
    },
  },
};
</script>

父组件的引入组件以及方法省略
过程是这样的
父组件是详情页面，子组件是一个tab页，分组件写的，在子组件里有新增，修改删除事件。然后报了这个错误
3.修改方法
1.tab的数组换个名字

2.return

3.在数据变化的时候用dtFormInExpTypeLatedListData接收

这样就可以了，

总结

props从父组件传递数据到子组件，不能子组件更改修改父组件，单向传递，所以，这个简单点就是找个中间值来代替