vue项目：父组件向子组件传值，子组件需要对传过来的数据进行修改问题

昨天在写项目时，父组件中包含很多相同类似的表格 我就给拆分出去了，此时我就需要将在父组件中获取的表格列表数据传递给子组件。 子组件（表格）涉及了删除按钮，新增按钮，此时就会对父组件传递过来的数据进行修改，但是我直接对props接受的数据进行修改就出了错误提示！

之所以报错是因为vue是单向数据流，想要直接对父组件传递过来的值进行修改是不被允许的。

父组件

<template>
  <a-modal  title="服务编辑" >
    <div class="service-content">
      <a-form
        :model="formState"
        ref="formRef"
        name="basic"
        :label-col="{ style: { width: '120px' } }"
      >
          <span>服务接收参数：</span><br />
          <a @click="addData('receive')">+ 新建参数</a>
          <service-table
            v-model:tableData="formState.serviceReceptionParam"
          ></service-table>
          
          <span>服务返回参数：</span><br />
          <a @click="addData('return')">+ 新建参数</a>
          <service-table
            v-model:tableData="formState.serviceReturnParam"
          ></service-table>
     </a-form>
     <div>
  </a-modal>
</template>
<script>
import { defineComponent, ref, reactive } from "vue";
import serviceTable from "./serviceTable.vue";
export default defineComponent({
  components: { serviceTable },
  setup() {
   const formState = reactive({
      serviceReceptionParam: [],
      serviceReturnParam: [],
    });
  // 新增表格行数据
    const addData = (type) => {
      if (type === "receive") {
        formState.serviceReceptionParam.push({});
      } else {
        formState.serviceReturnParam.push({});
      } 
    };

    return {
      formState,
      addData,
    };
  },
});
</script>

子组件

<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    :pagination="false"
    size="small"
    bordered
  >
    <template #name="{ record }">
      <a-input v-model:value="record.name" placeholder="请输入"></a-input>
    </template>
    <template #value="{ record }">
      <a-form-item
        ref="value"
        name="value"
      >
        <a-input
          v-model:value="record.value"
          placeholder="请输入"
          @change="changeData"
        />
      </a-form-item>
    </template>

    <template #operation="{ index }">
      <img
        @click="onDelete(index)"
        src="@/assets/img/delBig.png"
        alt=""
      />
    </template>
  </a-table>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  components: { },
  props: {
    tableData: {
      type: Object,
    },
    tableType: {
      type: String,
    },
  },
  setup(props, context) {
    const columns = [
      {
        title: "名称",
        dataIndex: "name",
        width: 120,
        key: "name",
        slots: { customRender: "name" },
      },
      {
        title: "值",
        dataIndex: "value",
        width: 120,
        key: "value",
        slots: { customRender: "value" },
      },
      {
        title: "操作",
        width: 80,
        align: "center",
        slots: { customRender: "operation" },
      },
    ];
    const tableDataList = ref([]);
    const onDelete = (j) => {
         props.tableData = props.tableData.filter((item, index) => index !== j);
    };
    onMounted(() => {
    });
    return {
      columns,
      onDelete,
      tableDataList,
    };
  },
});
</script>

解决办法
在子组件中声明一个data，然后将传递过来的值赋值给data，此时就可以进行修改操作

const tableDataList = ref([]); //用来接收传递过来的数据列表值，如果想要进行删除等操作，可间接修改props值
  onMounted(() => {
      tableDataList.value = props.tableData;  //在此生命周期钩子中将传过来的值进行赋值
      context.emit("update:tableData", tableDataList);  //该操作实现的是当数据一旦发生变化 就会将最新数据传递个父组件
    });

子组件如果这么写，
context.emit("update:tableData", tableDataList);
父组件传递值对应的写法
   <service-table
     v-model:tableData="formState.serviceReturnParam"
   ></service-table>